Javascript：加载 csv 文件并将其打印到页面答案

【问题标题】：Javascript: Load csv file and print it to pageJavascript：加载 csv 文件并将其打印到页面
【发布时间】：2014-04-02 21:22:06
【问题描述】：

我昨天刚开始学习 JavaScript，但我一开始就卡住了。

我的目标是创建一个简单的本地 html 页面，它读取 csv 文件，将其打印到页面上，并使用 d3.js 绘制它。这是我到目前为止所做的：

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Test Program</title>
    <meta charset="UTF-8"/>
    <script>
      function uploadConfirmation(){
        alert("Data Loaded!");
      }
      function displayData(){
        var dataset = document.getElementById("uploaded_data").value;
        var show = [];
        for (var i=0; i < dataset.length; i++) {
          show.push('<span>' + dataset[i] + '</span>');
        }
    </script>
  </head>
  <body>
    <h1>My Test Web Page</h1>
    <form>
      Upload some files?
      <br/>
      <input type="file" id="uploaded_data"/>
      <br/>
      <input type="submit" onmouseup="uploadConfirmation()"/>
      <button type="button" onclick="displayData()">Display Data</button>
    </form>
  </body>
</html>

有人能告诉我解决这个问题的正确逻辑吗？

更新
感谢所有的cmets。我设法在网上找到了一些资源并想出了一些代码。我希望它对其他人有帮助。

按照@tampis 的指导，这里有两个有用的在线资源：
- Upload file using AJAX
- Upload file using File API

这是我上传和显示数据的代码：

<input type="file" id="fileinput" />
<script>
  function readSingleFile(evt) {
    var f = evt.target.files[0]; 
    if (f) {
      var r = new FileReader();
      r.onload = function(e) { 
          var contents = e.target.result;
          document.write("File Uploaded! <br />" + "name: " + f.name + "<br />" + "content: " + contents + "<br />" + "type: " + f.type + "<br />" + "size: " + f.size + " bytes <br />");

          var lines = contents.split("\n"), output = [];
          for (var i=0; i<lines.length; i++){
            output.push("<tr><td>" + lines[i].split(",").join("</td><td>") + "</td></tr>");
          }
          output = "<table>" + output.join("") + "</table>";
          document.write(output);
     }
      r.readAsText(f);
      document.write(output);
    } else { 
      alert("Failed to load file");
    }
  }
  document.getElementById('fileinput').addEventListener('change', readSingleFile);
</script>

【问题讨论】：

问题是表单提交，文件上传到服务器，您可能没有捕获它，并且您期望在javascript中发生一些事情，但它没有。
@adeneo 谢谢！如何捕捉上传的文件？
您无法捕获上传的文件（请参阅this question）。您必须首先将文件上传到您通过 AJAX 下载文件的服务器。
@Boxuan 我不知道该怎么感谢你。真的感谢您的问题和答案。顺便说一句，您可以将更新作为答案，这样每个人都很容易知道这是一个答案，而不是问题的一部分。
@shadysherif 完成

标签： javascript html d3.js

【解决方案1】：

正如@shadysherif（来自 cmets）指出的那样，在这里重新发布答案（带有完整的工作代码）。

这里有两个有用的在线资源：
- Upload file using AJAX
- Upload file using File API

这是我上传和显示数据的代码：

<input type="file" id="fileinput" />
<script>
  function readSingleFile(evt) {
    var f = evt.target.files[0]; 
    if (f) {
      var r = new FileReader();
      r.onload = function(e) { 
          var contents = e.target.result;
          document.write("File Uploaded! <br />" + "name: " + f.name + "<br />" + "content: " + contents + "<br />" + "type: " + f.type + "<br />" + "size: " + f.size + " bytes <br />");

          var lines = contents.split("\n"), output = [];
          for (var i=0; i<lines.length; i++){
            output.push("<tr><td>" + lines[i].split(",").join("</td><td>") + "</td></tr>");
          }
          output = "<table>" + output.join("") + "</table>";
          document.write(output);
     }
      r.readAsText(f);
      document.write(output);
    } else { 
      alert("Failed to load file");
    }
  }
  document.getElementById('fileinput').addEventListener('change', readSingleFile);
</script>

【讨论】：

感谢您添加答案。

【解决方案2】：

读取本地文件有两种方式：

将文件上传到服务器并使用 AJAX 下载
使用File API。目前对它的支持可以在这个网站上看到：http://caniuse.com/fileapi

这是一个将 csv 文本文件解析为单元数组数组的简短命令（使用 JQuery）：

var csv = "..." // the text of the csv file obtained by AJAX or JQuery
var cells = csv.split("\n").map(function (row) {
    return row.split(";").map($.trim);
});

如果您不想使用 JQuery，则必须使用上述行中的内容。

【讨论】：