如何使用 HTML 5 FileReader 读取本地文件？

Question

客观的

我正在制作一个应用程序，我需要使用 JavaScript 和 HTML 5 读取本地文件，没有任何<input>标签或用户交互。

我试过的

在我的研究中，我发现了两个在 SO 中被大量引用的教程：

• https://www.html5rocks.com/en/tutorials/file/dndfiles/
• http://blog.teamtreehouse.com/reading-files-using-the-html5-filereader-api

但是，有一个问题。这两个教程都需要通过input标签进行用户交互，这是一个致命的问题，因为我想自动将文件的内容读入一个字符串。

代码

到目前为止，我设法获得了以下代码：

let readFile = function(path) {
    let reader = new FileReader();

    reader.onload = function(e) {
        var text = reader.result;
        console.log(text);
    };

    // Read in the image file as a data URL.
    reader.readAsText(MissingFileHandle);
};

但正如你所看到的，我错过了一个重要的步骤，我错过了MissingFileHandle。我的想法是将 a 传递path给此方法，因此该方法会将文件作为文本在本地读取并将其打印到控制台中，但我无法实现这一点。

题

给定相对路径，如何在不使用<input>标签的情况下使用 HTML 5 读取文件的内容？

Answer 1

HTML5 fileReader 工具确实允许您处理本地文件，但这些必须由用户选择，您不能在用户磁盘上查找文件。

是否可以在非服务页面上使用 JS/HTML5 FileReader 加载文件？

如何使用Javascript打开本地磁盘文件？

如何为 HTML 中的文件输入设置值？

Javascript读取文件而不使用输入

这些链接可帮助您找到答案。