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

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

尝试使用 XMLHttpRequest 实现简单的文本文件阅读器时，它可能无法正常工作。本文探讨了潜在问题并提供了纠正这些问题的解决方案。

XMLHttpRequest 异常 101

使用本地文件路径发出 XMLHttpRequest 请求时，可能会导致异常 101。发生这种情况的原因是现代浏览器严格限制直接文件系统访问。要避免这种情况，请避免使用 file:/// 路径。

Fetch API（XMLHttpRequest 的替代方案）

从 URL 检索数据的更现代且用户友好的方法是 Fetch API， JS中介绍的。下面的代码演示了它的用法：

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

本地文件的 XMLHttpRequest 配置

对于使用 XMLHttpRequest 的本地文件请求，需要检查状态 0 和 200，因为状态不是从Web 服务器：

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);
}

指定文件路径

使用时带有本地文件的 XMLHttpRequest，必须在文件名中指定 file:// 协议：

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

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