为什么我的 JavaScript 代码无法读取本地文本文件，如何修复？

浏览器中本地文本文件读取的故障排除

为了创建一个基本的文本文件阅读器，开发了一个 JavaScript 函数来获取在文件路径中，将每一行解析为字符数组，但遇到错误。本文旨在诊断并解决这些问题。

错误诊断

最初，尽管成功检索了文件路径，但代码无法显示文本内容。经过调试，发现 XMLHttpRequest 对象未正确处理本地文件访问。

更改为 Firefox 产生了成功的结果，突出显示了潜在的浏览器特定问题。特别是 Chrome，抛出了 XMLHttpRequest 异常 101，表示网络错误。

浏览器兼容性解决方案

为了解决浏览器兼容性问题，Fetch API， 2015 年在 JS 中引入，提供了一种更简单、更健壮的方法来从 URL 获取数据。这是代码的更新版本：

fetch("myText.txt")
  .then((res) => res.text())
  .then((text) => {
    // process the text content
  })
  .catch((e) => console.error(e));

访问本地文件

现代浏览器严格限制直接文件系统访问，因此应避免使用 file:/// 。相反，可以使用轻量级网络服务器（例如 python -m http.server 或 npx http-server）通过标准 HTTP URL 加载数据。

处理状态 0

何时使用 XMLHttpRequest 访问本地文件，不返回任何状态。要解决此问题，需要检查状态 0：

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) {
        // process the text content
      }
    }
  };
  rawFile.send(null);
}

示例用法

要使用更新的代码，请使用 file:// 指定文件路径/:

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

以上是为什么我的 JavaScript 代码无法读取本地文本文件，如何修复？的详细内容。更多信息请关注PHP中文网其他相关文章！