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

在浏览器中读取本地文本文件

XMLHttpRequest 是浏览器中异步数据检索常用的方法，但有时会遇到尝试读取本地文本文件时出现问题。

问题XMLHttpRequest

一个常见错误是 XMLHttpRequest 异常 101，这表明请求已中止。当尝试读取本地文件而不指定“file://”协议时，可能会发生这种情况。

替代方案：Fetch API

读取本地文本的更直接方法文件是通过 2015 年推出的 Fetch API 来读取的。使用 Fetch API 读取名为的本地文件的示例代码"myText.txt":

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

访问本地文件

现代浏览器对直接文件系统访问施加严格限制。避免使用“file:///”。相反，请考虑使用轻量级网络服务器，例如 Python -m http.server 或 npx http-server 通过常规 HTTP URL 加载数据。

使用 XMLHttpRequest 的示例代码

如果使用XMLHttpRequest，手动检查状态0（表示本地文件）而不是依赖返回的状态code:

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;
        console.log(allText);
      }
    }
  };
  rawFile.send(null);
}

指定文件路径

指定文件路径时记得包含“file://”协议：

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

以上是如何在Web浏览器中高效读取本地文本文件？的详细内容。更多信息请关注PHP中文网其他相关文章！