繁体   English   中英

如何将从我的机器上传的 csv 文件保存到 javascript 中的数据对象中?

How to save a csv file uploaded from my machine into a data object in javascript?

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我正在构建一个页面,该页面可以显示来自 csv 文件的传感器数据图表。 用户应该能够点击一个按钮,从他的机器中选择一个想要显示在图表上的 csv 文件。 为此,我正在使用 Highcharts 库。 图表按预期工作,但我只能在代码中输入 csv 文件。 当我上传文件并更新时,什么也没有发生。 那么如何使“data.csv”动态化? 我的想法是以某种方式将它保存到一个全局数据对象中,然后可以将其传递到 ajax url。 我不知道如何实现这一点,因为这是我的第一个 javascript 项目。

<!DOCTYPE html> <!-- Write your comments here -->
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"
    integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  <script src="https://code.highcharts.com/highcharts.js"></script> <!-- library include-->
  <script src="https://code.highcharts.com/modules/data.js"></script>
  <script src="https://code.highcharts.com/modules/exporting.js"></script>
  <script src="https://code.highcharts.com/highcharts-more.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.2/papaparse.js"></script>
  <title>Airmeter</title>
</head>

<body>

    <div id="container"></div>
    <form id='form'>
    
    <input type="file" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" id="input" />  
    <button type='submit'>
    update the chart
    </button>
    </form>
    
   
  
    

  <script>
$.ajax({
  type: "GET",
  url: "data.csv",
  success: function (data) {
    setTitle(data)
  }
});


function setTitle(raw_data){

  let newTitle;
 
  
  let chart = Highcharts.chart('container', {
    
    chart: {
      zoomType: 'xy',
      events: {
        load: function() {
          this.update({
            title: {
              text: 'Airmeter: '+ newTitle
            }
          })
        }
        
      }
    
    },
    
    xAxis:{
     
      title:{
          text: 'Zeit'
      }
  },

  yAxis:{
      

    title:{
        text: 'CO2 in ppm'
    }

} ,
  
exporting:{
  enabled: true
},


    title: {
      text: null
    },

    credits:{                  
      enabled: false
  },

    data: {
      csv: raw_data,
      parsed(e) {
        newTitle=e[0][1]  //set the first column as title of the chart
        e.shift()
        
      }
      
    }
  
  
  });

}


  </script>

</body>

</html>

我真的很感激帮助。 感谢您的时间,祝您有美好的一天!

1 个回复

如果 CSV 将始终在您的本地计算机上而不是服务器上,则您实际上不需要使用 AJAX 调用,您可以使用 FileAPI 和 CSV 解析器将数据传递给您的setTitle函数。

但是为了帮助您使用方法,请尝试对您的代码进行以下更改:

  1. 将 onChange 事件添加到您的输入中,因此无论何时选择文件,javascript 代码都可以对其进行“反应”。
  2. 将您的 AJAX 调用包装在 'change' 事件处理程序中。
  3. 将选定的文件名传递到 AJAX 请求的 URL。

在代码更改方面(未经测试):

<script>
// Add an event listener, so when a file is selected, the graph is drawn again
document.getElementById("input").addEventListener("change", drawGraph, false);

// Wrap your current AJAX call in the event handler
function drawGraph() {

  // Obtain the name of the file selected by the user in the <input>
  var fileName = document.getElementById('input').files[0].name;

  $.ajax({
    type: "GET",
    url: fileName, // use this name to fetch the selected file
    success: function (data) {
      setTitle(data)
    }
  });
}

// Leave the rest of the script block as it is
// ...

</script>
1 如何将上传的文件临时保存在服务器计算机中

我正在使用门户网站以CSV格式上传数据文件。当我尝试上传文件时,它会临时保存在C:\\ temp中,然后将其批量插入数据库服务器中。 问题:数据文件正在本地系统中保存...而不是在DB服务器中。由于这个原因,我遇到了类似C:\\ temp的错误。 mycode的: 谁能帮我将 ...

3 从上传的CSV文件中将数据返回到javascript的最佳方法是什么?

方案需要像这样运行:客户端上传CSV文件,然后使用上载的CSV文件中的数据动态填充表格。 我可以用简单的表格上传CSV文件。 没问题。 我可以在服务器端使用PHP解析数据。 没问题。 我可以用PHP服务器端创建一个数组。 没问题。 我该怎么回到JavaScript进行处理呢 ...

4 如何使用 url 将 csv 文件中的图像下载/保存到本地 Windows 机器上的特定创建文件夹中?

我正在尝试将在 csv 文件中作为 url 提供的图像下载到我在 C:/Desktop/Images 中创建的特定文件夹(命名为男性,女性用于分类)。 但是当我运行下面的代码时,没有任何东西被下载并保存到基于我的 csv 文件中存在的类别的特定文件夹中。 我的 csv 中的内容如下所示。 它有几千行 ...

6 如何从php中上传的csv文件更新不同的表数据?

编辑 我已经上传了csv文件。 但是现在,我想从上传的csv文件中更新数据。 如果表中已经存在csv数据,则我需要更新该数据,否则,我将其插入为新记录。 这是我的代码 但是每次这样我都会得到错误 在我的csv文件中,我有这样的数据 但我只想将具有相关ID的问题 ...

8 如何将数据从 csv 文件保存到字典?

我正在尝试读取 csv 文件中的数据并将其另存为字典。 前三列是键,第二列是值。 我试图通过以下方式做到这一点。 但它并没有将数据保存到计算机内存中,只是一种读取方式。 实际上,我需要将所有数据保存到 g(i,j,t) 中。 例如,g(1,1,2)=20, g(1,1,3)=40.... 我 ...

9 Javascript:保存上传的文件

我想在我的 linux 服务器中使用 javascript 保存上传的文件。 我写的代码是: 现在我想将该文件保存为“files/upload.csv”。 任何人都可以请指教,我该怎么做? 提前致谢 ...

10 从CSV文件上传数据的问题

我从csv文件上传到数据库的数据有问题。 在我的csv文件中,我有8行,即8种药物。 但是,当我上传文件时,我有重复项,还有一些根本不在文件中的药物。 另外,我有很多空行。 这是我的代码: medicine_id与文件中的那个不匹配,但其余信息匹配。 我认为这可能是因为它正 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM