1

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

另外，从我在互联网上进行的搜索中，有人说 JavaScript 出于安全原因无法读取本地文件，所以如果这是正确的，我可以使用另一种语言吗？如果可以选择的话，我对 PHP 有点熟悉，但我对此表示怀疑。

编辑

根据 thg435 的问题，我将解释我要完成的工作。

我的项目是分析安大略省政府收集的一组水质数据（我已经做过）并以某种方式显示出来。我选择使用 Google Maps API 在网页上显示它。我目前有一份被发现的化学品档案。每条线都是不同的化学品。我想读取数组中的文件，然后创建一个选项菜单来显示数组中的化学品。

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

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

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

ETC...

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

4

2 回答 2

3

你会想看看FileReader API。这应该允许您通过读取本地文件的文本readAsText()。这不适用于所有浏览器，但应该适用于所有现代浏览器。您可以在此处查看哪些浏览器支持它。

示例：

<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 对它们进行解码。

于 2014-01-12T19:09:02.287 回答
1

您可以通过我知道的 2 种方式访问​​本地文件。第一种方法是让用户将文件拖放到页面上，并使用<input type="file">标签。

对于前者，您需要执行以下操作：

addEventListener('dragover', function(e){e.preventDefault();});
addEventListener('drop', function(e) {
    eventHandler.call(e.dataTransfer||e.clipboardData);
    e.preventDefault();
});

对于后者，您需要为change输入上的事件添加一个事件侦听器：

document.getElementById('upload').addEventListener('change', eventHandler)

对于两者，您都需要将其作为基本回调函数：

function eventHandler() {
    var file = this.files[0]; //get the files
    var reader = new FileReader(); //initiate reader
    reader.onloadend = callbackFn; //set event handler
    reader.readAsText(file); //initiate reading of files
    if (this.id) { //only run if this is the input
        var id = this.id; 
        this.outerHTML = this.outerHTML; //this resets the input
        document.getElementById(id).addEventListener('change', eventHandler); //reattach event handler
    }
    function callbackFn(e) {
        document.getElementById('output').value = e.target.result; //output it to a textarea
    }
}

这是一个演示，其中您放入其中的任何文件或您从输入中选择的任何文件的文本内容（您在记事本中打开时看到的内容）都放在 textarea 中。

有关更多信息，请参阅https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications。

于 2014-01-12T19:10:55.050 回答