如何使用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。我的想法是将path传递给此方法，因此该方法将以文本形式在本地读取文件并将其打印到控制台中，但我无法实现这一点。

问题

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

- Flame_Phoenix

---

浏览器强制用户交互选择文件时，这是一种安全风险。 - Daniel A. White

那么，你的意思是说我想要的实际上是不可能的吗？ - Flame_Phoenix

Answer 1

HTML5的fileReader功能确实允许您处理本地文件，但这些文件必须由用户选择，您不能在用户磁盘上寻找文件。以下链接可以帮助您找到答案：Is it possible to load a file with JS/HTML5 FileReader on non served page?、How to open a local disk file with Javascript?、How to set a value to a file input in HTML?和Javascript read file without using input。

- Ganesh Aher

---

你是对的。即使使用 filereader.readAsText(new File([], 'dir/file.txt')) 也不起作用。 - Eric

Answer 2

这可以完成一个技巧。

HTML。

        <h1>Text File Reader</h1>
        <div>
            Select a text file: 
            <input type="file" id="fileInput">
        </div>
        <pre id="fileDisplayArea"><pre>

    </div>

JS

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

        fileInput.addEventListener('change', function(e) {
            var file = fileInput.files[0];
            var textType = /text.*/;

            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!"
            }
        });
}

- Hiren Jungi

---

好的，你想要没有用户界面吗？ - Hiren Jungi

变量文件 = "在此处输入您的文件路径" - Hiren Jungi

这不是 OP 想要的方式，所以它不能正常工作（以他/她想要的方式）。 - Kukeltje