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

javascript xmlhttprequest file-io

2022-08-29 23:07:47

我试图通过创建一个函数来实现一个简单的文本文件读取器，该函数接收文件的路径并将每行文本转换为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();
}

这到底是怎么回事？

在从以前的修订版稍微更改了一下代码后，这似乎仍然不起作用，现在它给了我一个例外101。XMLHttpRequest

我已经在Firefox上测试了这个，它可以工作，但在谷歌浏览器，它只是不起作用，它一直给我一个例外101。我怎样才能让它不仅在Firefox上运行，而且在其他浏览器（尤其是Chrome）上都可以使用？

答案 1

您需要检查状态 0（就像在本地加载文件一样，您不会返回状态，因为它不是来自XMLHttpRequestWebserver)

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

答案 2

在javascript中引入petch 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

更新 30/07/2018 （免责声明）：

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

更新-2（免责声明）：

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