Question

此处是JavaScript初学者。我想编写一个基本函数，该函数接受本地文本文件的路径并返回其内容。我知道这个问题现在已经问了1000遍了，例如here。但是每个答案都不尽相同，我尝试了几个，但它们似乎没有用。谷歌搜索了一段时间之后，我能够提出以下解决方案

function readTextFile(path) {
    var reader = new FileReader();
    reader.onload = function(event) {
        var contents = event.target.result;
        console.log("File contents: " + contents);
    };

    reader.onerror = function(event) {
        console.error("File could not be read! Code " + event.target.error.code);
    };

    var file = new File([path], { type: 'plain/text' });
    reader.readAsText(file);
    return contents
}

但是，由于某种原因，它输出路径本身，而不输出内容。请提出如何修复，缩短和改进此代码的方法。

我也尝试获取，但是收到臭名昭著的跨域请求错误，我不知道该怎么解决。

编辑：

好吧，我将再添加几行以使内容更清晰

index.html：

<input type="file" id="jsonAddressInput" value="enter address here">

script.js

function myFunction() {
    var addressField = document.getElementById("jsonAddressInput");

    var addressText = addressField.value;
    console.log(addressText);

    var textContentsOfFile = readTextFile(addressText)
    //console.log(textContentsOfFile)
}

function readTextFile(path) {
    var reader = new FileReader();
    reader.onload = function(event) {
        var contents = event.target.result;
        console.log("File contents: " + contents);
    };

    reader.onerror = function(event) {
        console.error("File could not be read! Code " + event.target.error.code);
    };

    var file = new File([""], path, { type: 'plain/text' });
    reader.readAsText(file);
    return contents
}

有人提到我可以使用的结果来获取文件内容。请建议如何解决

Answer 1

以下是读取本地文件的示例：

function readJson(blob) {
    var reader = new FileReader();
    reader.onload = function(event) {
        contents = event.target.result;
    };

    reader.onerror = function(event) {
        console.error("File could not be read! Code " + event.target.error.code);
    };

    var file = new File(blob, { type: 'plain/text' });
    reader.readAsText(file);
}

let contents

document.querySelector("input").addEventListener("change", (e) => {
  contents = readJson(e.target.files);
})

document.querySelector("button").addEventListener("click", (e) => {
  console.log(contents);
})

<input type="file">

<button>show contents</button>

如果要获取远程文件的内容，请使用fetch

读取文本文件并返回内容

1 个答案: