javascript - 读取文本文件并返回内容

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
}

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

我也尝试过 fetch，但遇到了臭名昭著的跨域请求错误，我不知道如何轻松解决。

编辑:

好的，我会添加几行以使事情更清楚

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