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

Question

我正在构建一个页面，可以显示来自 csv 文件的传感器数据图表。 用户应该能够单击按钮从他的机器中选择所需的 csv 文件以显示在图表上。 为此，我正在使用 Highcharts 库。 该图表按需要工作，但我只能在代码中输入 csv 文件。 当我上传文件并更新时，什么也没有发生。 那么如何使“data.csv”动态化呢？ 我的想法是以某种方式将其保存到全局数据 object 中，然后可以将其传递到 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>

我真的很感激帮助。 感谢您的宝贵时间，祝您有美好的一天！

Answer 1

If the CSV will always be on your local machine rather than a server, you don't really need to be using an AJAX call and you could use the FileAPI and a CSV parser to pass the data to your setTitle function.

但是为了帮助您的方法，请尝试对您的代码进行以下更改：

1. 将 onChange 事件添加到您的输入中，因此无论何时选择一个文件，javascript 代码都可以对其进行“反应”。
2. 将 AJAX 调用包装在“更改”事件处理程序中。
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>