Question

我的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"所以我可以选择多个文件。

Answer 1

您可以通过以下几种方式处理此问题。您可能会想到将文件转换为PHP脚本，然后执行$csvData[] = fgetcsv($file)之类的操作。然后你可以echo json_encode($csvData);。它可能是一个额外的http /服务器请求，但处理文件要容易得多。

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

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

1 个答案: