Question

我昨天刚刚开始学习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>

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

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

按照@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>

Answer 1

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

将文件上传到服务器并使用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，则必须使用上述行中的内容。

Answer 2

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

以下是两个有用的在线资源：
-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：加载csv文件并将其打印到页面

2 个答案: