javascript - 设置要在 JavaScript 中读取的文本文件？

Question

我正在为我的一个 html 项目测试一个文件阅读器。我希望 JavaScript 程序立即读取特定文件，而不是由用户(在本例中为我)选择的文件。我有 p 标签和标签的 id 作为"file"。当我在浏览器 (Safari) 中运行该程序时，我收到错误消息

TypeError: Argument 1 ('blob') to FileReader.readAsText must be an instance of Blob

我一直在网上寻找解决方案，但我找不到任何东西。我正在考虑用 python 编写我的程序，然后使用 trinket.io 的 iframe 标签将它插入到我的网页中。但后来我有点放弃了这个想法。这是代码:

var reader = new FileReader();
var fileToRead = "quotes.txt";

// attach event, that will be fired, when read is end
reader.addEventListener("loadend", function() {
  document.getElementById('file').innerText = reader.result;
});

reader.readAsText(fileToRead);

我希望这个程序的输出显示文本文件的内容，但是当我在浏览器中运行它时，它给我一个空白屏幕。我希望那里有解决方案。

Answer 1

FileReader 需要一个 blob - 这是一个类似文件的对象。它可以是存储在内存中的 blob 或对文件的引用。 出于安全原因，它不适用于文件名 - 您不能在未经用户同意的情况下简单地从用户的文件系统中读取任意文件。

要在用户同意的情况下实现它，请继续阅读下文。

您需要用户使用文件输入来明确选择文件。选择文件后，输入将触发带有 FileList 的事件，其中包含对所选文件的引用。然后可以在 FileReader 中使用文件引用来读取它们的内容。

这是一个工作示例:

  fileInput.addEventListener("change", onFileChanged)
  
  function onFileChanged(event) {
    const fileList = event.target.files
    fileText.value = ""

    if (fileList.length === 0) {
      console.log("No file selected, please select one!")
      return
    }
    
    if (fileList.length > 1) {
      console.log("Too many files selected, please select only one!")
      return
    }
    
    // destruct first entry of fileList, equivalent to `const file = fileList[0]`
    const [file] = fileList
    
    // you can validate what type of file you accept
    if (file.type !== "text/plain") {
      console.log("Only text files are supported!")
      return
    }

    console.log("Reading file", file.name)
    readFile(file, printText)
  }
  
  function readFile(file, callback) {
    if (typeof callback !== "function") {
      throw new Error("Please supply a callback function to handle the read text!")
    }
    const reader = new FileReader()
    reader.addEventListener("load", function() {
      callback(reader.result)
    })
    return reader.readAsText(file)
  }
  
  function printText(text) {
    fileText.value = text
  }

<input id="fileInput" type="file"/>

<div>
  <textarea id="fileText" cols="50" rows="10"></textarea>
</div>