JS FileReader：从本地文件和 jquery-csv 读取 CSV答案

【问题标题】：JS FileReader: Read CSV from Local File & jquery-csvJS FileReader：从本地文件和 jquery-csv 读取 CSV
【发布时间】：2015-07-25 05:52:29
【问题描述】：

我在与 html 页面相同的目录中有一个 CSV 文件，我想使用 FileReader 将文件内容读入 jquery-csv 的 To Arrays 函数，但我似乎无法让它工作适当地。我想我理解这项任务的异步性，但我是否正确描述了它？在这里，我试图输出第二列中的第二个单元格。感谢您的帮助。

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['timeline']}]}"></script>

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="jquery.csv-0.71.js"></script>
<script type="text/javascript">

var reader = new FileReader();

reader.onload = function(e) {
  var text = e.target.result;
  var data = $.csv.toArrays(text);
  document.write(data[1][1]);

}

reader.readAsText('data.csv');




</script>

【问题讨论】：

FileReader operations take a file/blob object，不是 url 路径。您必须使用 ajax 请求从服务器获取文件

标签： javascript csv filereader jquery-csv

【解决方案1】：

Here's a working demo由jquery-csv提供

<html>
<head>
<meta charset="utf-8" />
<title>Demo - CSV-to-Table</title>
</head>

<body>
  <div id="inputs" class="clearfix">
    <input type="file" id="files" name="files[]" multiple />
  </div>
  <hr />
  <output id="list">
  </output>
  <hr />
  <table id="contents" style="width:100%; height:400px;" border>
  </table>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  <script src="http://evanplaice.github.io/jquery-csv/src/jquery.csv.min.js"></script>
  <script>
    $(document).ready(function() {
      if(isAPIAvailable()) {
        $('#files').bind('change', handleFileSelect);
      }
    });

    function isAPIAvailable() {
      // Check for the various File API support.
      if (window.File && window.FileReader && window.FileList && window.Blob) {
        // Great success! All the File APIs are supported.
        return true;
      } else {
        // source: File API availability - http://caniuse.com/#feat=fileapi
        // source: <output> availability - http://html5doctor.com/the-output-element/
        document.writeln('The HTML5 APIs used in this form are only available in the following browsers:<br />');
        // 6.0 File API & 13.0 <output>
        document.writeln(' - Google Chrome: 13.0 or later<br />');
        // 3.6 File API & 6.0 <output>
        document.writeln(' - Mozilla Firefox: 6.0 or later<br />');
        // 10.0 File API & 10.0 <output>
        document.writeln(' - Internet Explorer: Not supported (partial support expected in 10.0)<br />');
        // ? File API & 5.1 <output>
        document.writeln(' - Safari: Not supported<br />');
        // ? File API & 9.2 <output>
        document.writeln(' - Opera: Not supported');
        return false;
      }
    }

    function handleFileSelect(evt) {
      var files = evt.target.files; // FileList object
      var file = files[0];

      // read the file metadata
      var output = ''
          output += '<span style="font-weight:bold;">' + escape(file.name) + '</span><br />\n';
          output += ' - FileType: ' + (file.type || 'n/a') + '<br />\n';
          output += ' - FileSize: ' + file.size + ' bytes<br />\n';
          output += ' - LastModified: ' + (file.lastModifiedDate ? file.lastModifiedDate.toLocaleDateString() : 'n/a') + '<br />\n';

      // read the file contents
      printTable(file);

      // post the results
      $('#list').append(output);
    }

    function printTable(file) {
      var reader = new FileReader();
      reader.readAsText(file);
      reader.onload = function(event){
        var csv = event.target.result;
        var data = $.csv.toArrays(csv);
        var html = '';
        for(var row in data) {
          html += '<tr>\r\n';
          for(var item in data[row]) {
            html += '<td>' + data[row][item] + '</td>\r\n';
          }
          html += '</tr>\r\n';
        }
        $('#contents').html(html);
      };
      reader.onerror = function(){ alert('Unable to read ' + file.fileName); };
    }
  </script>
</body>
</html>

免责声明：我是 jquery-csv 的作者

【讨论】：

@AuriellePerlmann 不客气。提醒一下，浏览器对通过 HTML5 文件 API 可以加载到内存中的数据量（即 10MB）有一个上限。如果您需要加载比这更大的原始 CSV 文件，您将需要一个能够分块输入的解析器。如果是这样的话，我强烈推荐 PapaParse。
很酷，谢谢，是的，我已经看到了 csv 大小的危险和每一个痛苦的边缘情况，但我们处理了大部分服务器端，这对于我正在帮助某人处理客户端的项目来说是完美的旁边有一个文件选择器。我松了一口气，我可以停止搜索和搜索哈
我非常清楚 CSV 的局限性。处理大量数据非常糟糕。例如，要解析 1000 条记录，您必须首先从头到尾解析它们以确定第 1000 条记录的结束位置。除非您可以保证这些值不包含换行符，否则即使编写简化的解析器来加速该过程也不会起作用。块解析器通过获取任意数量的数据并解析直到失败来解决这个限制。我计划添加此功能，但幸运的是 PapaParse 通过首先实现它为我节省了时间/精力。
我很确定我们在我的公司也使用 papaparse - 同样我非常热衷于我多么讨厌 excel 并且没有程序能够很好地为最终用户处理大量 csv - 所以我们的一位工程师构建了 github。 com/DataFoxCo/gocsv 为我们节省了一天，哈哈，它很棒 - 但可惜它是命令行 - 很难让办公室里的每个人都使用它从未使用过终端：-P
@AuriellePerlmann 很酷，如果我在不久的将来碰巧过渡到 Go，我将不得不尝试一下。

【解决方案2】：

它不起作用。您无权从浏览器中使用 javascript 读取文件。处理它的唯一方法是创建一个 input[type=file] 标签并向其添加 onChange 事件。例如：

document.getElementById('fileupload').addEventListener('change', function (e) {
  var files = e.target.files;
  //proceed your files here
  reader.readAsText(files[0]);
}, false);

【讨论】：