在javascript中读取本地csv文件？

小编典典

在javascript中读取本地csv文件？

ajax

[编辑] 我使用 D3 解决了这个问题，不用了，谢谢！

所以我有一个看起来像这样的csv文件，我需要将本地csv文件导入到我的客户端javascript中：

    "L.Name", "F.Name", "Gender", "School Type", "Subjects"
    "Doe",    "John",  "M",      "University",  "Chem I, statistics, English, Anatomy"
    "Tan",    "Betty",   "F",     "High School", "Algebra I, chem I, English 101"
    "Han",    "Anna",    "F",     "University",  "PHY 3, Calc 2, anatomy I, spanish 101"
    "Hawk",   "Alan",    "M",     "University",  "English 101, chem I"

我最终需要解析它并输出如下内容：

Chem I: 3         (number of people taking each subject)
Spanish 101: 1 
Philosophy 204: 0

但就目前而言，我仍然只是将其导入javascript。

我当前的代码如下所示：

    <!DOCTYPE html>  
    <html>  
    <body>
    <h1>Title!</h1>
    <p>Please enter the subject(s) that you wish to search for:</p>
    <input id="numb" type="text"/> 
    <button onclick="myFunction()">Click me to see! :) </button>
    <script>
    function myFunction() {
        var splitResearchArea = []; 
        var textInput = document.getElementById('numb').value; 
        var splitTextInput = textInput.split(",");

      for(var i =0; i<splitTextInput.length; i++) {
        var spltResearchArea = splitTextInput[i];
        splitResearchArea.push(spltResearchArea);
      }
    }

我已经研究并找到了一些关于的有用链接，但是我是javascript的新手，我并不完全了解它。我应该使用Ajax吗？FileReader？jQuery的？与另一种相比，使用一种有什么好处？以及如何在代码中实现呢？

但是，是的，由于我对javascript很陌生，所以我感到很困惑，因此在正确方向上的任何帮助都将非常有用。谢谢！！

阅读 2342

2020-07-26

共1个答案

小编典典

下面是如何使用readAsBinaryString()从的FileReader API来加载本地文件。

<p>Select local CSV File:</p>
<input id="csv" type="file">

<output id="out">
    file contents will appear here
</output>

基本上，只需要侦听change事件<input type="file">并调用readFile函数即可。

var fileInput = document.getElementById("csv"),

    readFile = function () {
        var reader = new FileReader();
        reader.onload = function () {
            document.getElementById('out').innerHTML = reader.result;
        };
        // start reading the file. When it is done, calls the onload event defined above.
        reader.readAsBinaryString(fileInput.files[0]);
    };

fileInput.addEventListener('change', readFile);

jsFiddle

2020-07-26