Question

目的

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

我尝试了什么

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

然而，有一个问题。这两个教程都需要通过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传递给此方法，因此该方法将文本本地读取并将其打印到控制台中，但我无法实现此目的。

问题

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

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

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

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

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

目的

我尝试了什么

代码

问题

2 个答案: