如何使用HTML 5 FileReader读取本地文件？ [重复]

This question already has an answer here:

这个问题在这里已有答案:

Javascript read file without using input 2 answers

Javascript读取文件而不使用输入2答案

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读取本地文件,而不需要任何标记或用户交互。

What I tried

On my research, I found two tutorials that are heavily cited in SO:

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

However, there is a problem. Both of this tutorials require user interaction via the input tag, which is a life killer since I want to read the contents of the file automatically into a string.

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

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 path to 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。我的想法是传递一个路径到这个方法,所以该方法将本地读取文件作为文本并将其打印到控制台,但我无法实现这一点。

Question

Given a relative path, how can I read the contents of a file using HTML 5 without using <input> tags?

给定相对路径,如何在不使用标签的情况下使用HTML 5读取文件的内容?

2 个解决方案

#1

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?

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

How to set a value to a file input in HTML?

如何在HTML中设置文件输入的值?

Javascript read file without using input

Javascript不使用输入读取文件

These links help you to find answer.

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

#2

-1

This Can do a trick.

这可以做一个技巧。

HTML

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

    </div>

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

#1