如何在浏览器中读取本地文本文件？

Question

我试图通过创建一个接收文件路径并将每一行文本转换为 char 数组的函数来实现一个简单的文本文件阅读器，但它不起作用。

function readTextFile() {
  var rawFile = new XMLHttpRequest();
  rawFile.open("GET", "testing.txt", true);
  rawFile.onreadystatechange = function() {
    if (rawFile.readyState === 4) {
      var allText = rawFile.responseText;
      document.getElementById("textSection").innerHTML = allText;
    }
  }
  rawFile.send();
}

这里出了什么问题？

在从 以前的版本 中稍微更改代码之后，这似乎仍然不起作用，现在它给了我一个 XMLHttpRequest 异常 101。

我已经在 Firefox 上对此进行了测试，它可以工作，但在 Google Chrome 中它不起作用，它一直给我一个异常 101。我怎样才能让它不仅适用于 Firefox，而且适用于其他浏览器（尤其是 Chrome )?

原文由 Danny 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您需要检查状态 0（当使用 XMLHttpRequest 在本地加载文件时，您不会得到返回的状态，因为它不是来自 Webserver ）

 function readTextFile(file)
 {
 var rawFile = new XMLHttpRequest();
 rawFile.open("GET", file, false);
 rawFile.onreadystatechange = function ()
 {
 if(rawFile.readyState === 4)
 {
 if(rawFile.status === 200 || rawFile.status == 0)
 {
 var allText = rawFile.responseText;
 alert(allText);
 }
 }
 }
 rawFile.send(null);
 }

并在文件名中指定 file:// ：

 readTextFile("file:///C:/your/path/to/file.txt");

原文由 Majid Laissi 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

javascript引入 fetch api 后，读取文件内容简单的不能再简单了。

读取文本文件

fetch('file.txt')
  .then(response => response.text())
  .then(text => console.log(text))
  // outputs the content of the text file

读取一个 json 文件

fetch('file.json')
  .then(response => response.json())
  .then(jsonResponse => console.log(jsonResponse))
   // outputs a javascript object from the parsed json

2018 年 7 月 30 日更新（免责声明）：

这种技术在 Firefox 中运行良好，但在编写此更新时， Chrome 的 fetch 实现似乎不支持 file:/// URL 方案（在 Chrome 68 中测试）。

更新 2（免责声明）：

出于与 Chrome 相同的（安全）原因，此技术不适用于版本 68（2019 年 7 月 9 日）以上的 Firefox ： CORS request not HTTP 。请参阅 https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp 。

原文由 Abdelaziz Mokhnache 发布，翻译遵循 CC BY-SA 4.0 许可协议