javascript - 使用 JavaScript 将本地文件解析为数组

Question

我正在尝试读取本地文件并使用 JavaScript 将每一行作为数组中的索引。过去 20 分钟我一直在寻找，要么我很愚蠢，要么真的没有与我的问题相关的答案(...但可能是前者 :P)。我真的是 JavaScript 的新手，所以如果你有答案，请评论一下代码，让我知道发生了什么？

此外，根据我在互联网上所做的搜索，有些人说出于安全原因 JavaScript 无法读取本地文件，所以如果这是正确的，我可以使用另一种语言吗？如果这是一个选项，我对 PHP 有点熟悉，但我怀疑它是不是。

编辑

根据 thg435 的问题，我将解释我要完成的任务。

我的项目是分析安大略省政府收集的大量水质数据(我已经完成)并以某种方式显示这些数据。我选择使用 Google Maps API 在网页上显示它。我目前有一份找到的化学品文件。每条线都是不同的化学品。我想读取数组中的文件，然后创建一个显示数组中化学物质的选项菜单。

此外，我想读取的本地文件将始终具有相同的名称和位置。我见过人们有框，用户可以在其中单击并选择他们的文件或进行拖放，但这不是我要找的。

---

我认为我没有正确解释这一点。我在与包含单词的 HTML 和 JavaScript 文件相同的目录中有一个文件。示例:

第 1 行:“铁”第 2 行:“铝”第 3 行:“钢”

等...

我想读取文件并将每一行解析为数组中的不同索引。我不希望用户能够使用 <input ... /> 选择要读取的文件

Answer 1

您将要查看 FileReader API .这应该允许您通过 readAsText() 读取本地文件的文本。这不适用于所有浏览器，但应该适用于所有现代浏览器。可以看看哪些浏览器支持here .

Example :

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

var filesInput = document.getElementById("file");
filesInput.addEventListener("change", function (event) {
    var files = event.target.files;
    var file = files[0];
    var reader = new FileReader();
    reader.addEventListener("load", function (event) {
        var textFile = event.target;
        alert(textFile.result);
    });
    reader.readAsText(file);
});

如果没有用户交互，就不可能调用 FileReader API。因此，您的用户必须选择要加载的任何文件才能以纯 JS 读取它。因为我假设这将在服务器上，为什么不将化学品列表也放在服务器上并GET JSON 编码的结果数组。然后你可以用 Javascript 解码它们。