如何使用 filereader 解析 csv 文件并将其转换为数组？答案

【问题标题】：How can I use filereader to parse csv file and convert it into an array?如何使用 filereader 解析 csv 文件并将其转换为数组？
【发布时间】：2015-06-12 15:50:20
【问题描述】：

我的 html 页面中有这个：

<input type="file" id="fileInput" />

这在我的 javascript 页面中：

window.onload = function () {
var fileInput = document.getElementById('fileInput');
var fileDisplayArea = document.getElementById('fileDisplayArea');

fileInput.addEventListener('change', function (e) {
    // code that handles reading the text file
    var file = fileInput.files[0];
    var textType = /text.*/;
    // checks if the file is a text file
       if (file.type.match(textType)) {
            var reader = new FileReader();
            reader.onload = function (e) {
                fileDisplayArea.innerText = reader.result;
            }

            reader.readAsText(file);
        } else {
            fileDisplayArea.innerText = "File not supported!";
        }
    });
}

我希望能够将 Filereader 转换为数组，这样我就可以执行以下操作：

document.getElementById("today").innerHTML = today[0];

这可能吗？我也不认为这是使用 filereader 读取 csv 文件的方式。

更新：我已经弄清楚了如何获取 csv 文件并将其转换为数组，方法如下：

$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: "data.csv",
        dataType: "text",
        success: function (data) { processData(data); }
    });
    function processData(csv) {
        var temp = new Array();
        temp = csv.split(",");
        document.getElementById("today").innerHTML = temp[0];
    }
});

现在我想知道是否有办法使用 FileReader()，这样我就可以从 html 页面中选择文件，而不是使用 url: "data.csv"，这样我就可以选择多个文件。

【问题讨论】：

您必须先解析 csv。照原样，您只是在吞食整个文件并将其填充到文本节点中。这意味着就 JS/DOM 而言，它只是一个巨大的文本字符串。
首先，我强烈建议您使用 CSV 解析库，而不是自己做splits。它会让你头疼（想想不同的可能的换行符，或列分隔符，转义字符等。Papaparse 功能强大，功能齐全，设计精良。然后，是的，你可以使用 fileReader。参见 papaParse 示例here（即使您不使用 papaparse 也应用该逻辑）。

标签： javascript html csv filereader

【解决方案1】：

您可以通过几种方式来处理这个问题。您可能会考虑将文件 ajax 到 PHP 脚本，然后执行$csvData[] = fgetcsv($file) 之类的操作。然后你可以echo json_encode($csvData);。这可能是一个额外的 http/server 请求，但处理文件要容易得多。

有些 Javascript 库不需要运行服务器端脚本 - JQuery CSV 和 PapaParse

【讨论】：