Javascript 如何使用 HTML 5 FileReader 读取本地文件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41849745/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to read local files using HTML 5 FileReader?
提问by Flame_Phoenix
Objective
客观的
I am making an application, and I need to read a local file using JavaScript and HTML 5, without any <input>tags or user interaction whatsoever.
我正在制作一个应用程序，我需要使用 JavaScript 和 HTML 5 读取本地文件，没有任何<input>标签或用户交互。
What I tried
我试过的
On my research, I found two tutorials that are heavily cited in SO:
在我的研究中，我发现了两个在 SO 中被大量引用的教程：
- https://www.html5rocks.com/en/tutorials/file/dndfiles/
- http://blog.teamtreehouse.com/reading-files-using-the-html5-filereader-api
- https://www.html5rocks.com/en/tutorials/file/dndfiles/
- http://blog.teamtreehouse.com/reading-files-using-the-html5-filereader-api
However, there is a problem. Both of this tutorials require user interaction via the inputtag, which is a life killer since I want to read the contents of the file automatically into a string.
但是，有一个问题。这两个教程都需要通过input标签进行用户交互，这是一个生命杀手，因为我想自动将文件的内容读入一个字符串。
Code
代码
So far I managed to get the following code:
到目前为止，我设法获得了以下代码：
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);
};
But as you can see, I am missing an important step, I am missing MissingFileHandle. My idea would be to pass a pathto this method, and so the method would read the file locally as text and print it into the console, but I am unable to achieve this.
但正如你所看到的，我错过了一个重要的步骤，我错过了MissingFileHandle。我的想法是将 a 传递path给此方法，因此该方法会将文件作为文本在本地读取并将其打印到控制台中，但我无法实现这一点。
Question
题
Given a relative path, how can I read the contents of a file using HTML 5 without using <input>tags?
给定相对路径，如何在不使用<input>标签的情况下使用 HTML 5 读取文件的内容？
采纳答案by Ganesh Aher
The HTML5 fileReader facility does allow you to process local files, but these MUST be selected by the user, you cannot go rooting about the users disk looking for files.
HTML5 fileReader 工具确实允许您处理本地文件，但这些必须由用户选择，您不能在用户磁盘上查找文件。
Is it possible to load a file with JS/HTML5 FileReader on non served page?
是否可以在非服务页面上使用 JS/HTML5 FileReader 加载文件？
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
These links help you to find answer.
这些链接可帮助您找到答案。
回答by Hiren Jungi
This Can do a trick.
这可以做一个伎俩。
HTML
HTML
<h1>Text File Reader</h1>
<div>
Select a text file:
<input type="file" id="fileInput">
</div>
<pre id="fileDisplayArea"><pre>
</div>
JS
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!"
}
});
}
