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

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

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上测试过了，它可以工作，但在谷歌Chrome中，它不会工作，它一直给我一个101例外。我怎么能让它不仅在Firefox上工作，而且在其他浏览器(尤其是Chrome)上工作?

当前回答

在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

更新30/07/2018(免责声明):

这种技术在Firefox中工作得很好，但似乎Chrome的fetch实现在编写此更新之日不支持file:/// URL方案(在Chrome 68中测试)。

更新2(免责声明):

此技术不适用于版本68(2019年7月9日)以上的Firefox，原因与Chrome相同(安全):CORS请求而不是HTTP。见https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp。

2017-09-09 09:42:23

其他回答

如何读取本地文件?

通过使用这个，你将通过loadText()加载一个文件，然后JS将异步等待，直到文件被读取和加载之后，它将执行readText()函数，允许你继续使用正常的JS逻辑(你也可以在loadText()函数上写一个try catch块，以防出现任何错误)，但在这个例子中，我将它保持在最小。

async function loadText(url) {
    text = await fetch(url);
    //awaits for text.text() prop 
    //and then sends it to readText()
    readText(await text.text());
}

function readText(text){
    //here you can continue with your JS normal logic
    console.log(text);
}

loadText('test.txt');

2019-10-03 13:33:50

为了通过JavaScript使用chrome读取本地文件文本，chrome浏览器应该运行参数——allow-file-access-from-files来允许JavaScript访问本地文件，然后你可以像下面这样使用XmlHttpRequest读取它:

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
   if (xmlhttp.readyState == 4) {
       var allText = xmlhttp.responseText;          
            }
        };
xmlhttp.open("GET", file, false);
xmlhttp.send(null);

2019-01-07 09:56:22

是的，JS可以读取本地文件(参见FileReader())，但不是自动的:用户必须将文件或文件列表传递给脚本，html <input type="file">。

然后使用JS可以处理(示例视图)文件或文件列表，它们的一些属性和文件或文件内容。

出于安全原因，JS不能自动(不需要用户输入)访问其计算机的文件系统。

为了允许JS自动访问本地fs，需要创建一个hta文档而不是一个包含JS的html文件。

hta文件可以包含JS和VBS。

但是hta可执行文件只能在windows系统上运行。

这是标准的浏览器行为。

也谷歌Chrome在fs API工作，更多信息在这里:http://www.html5rocks.com/en/tutorials/file/filesystem/

2016-01-29 03:31:48

访问javascript !转到readAsText部分并尝试这个示例。您将能够了解FileReader的readAsText函数是如何工作的。

var openFile = function（event） { var input = event.target; var reader = new FileReader（）; reader.onload = function（） { var text = reader.result; var node = document.getElementById（'output'）; node.innerText = text; console.log（reader.result.substring（0， 200））; }; reader.readAsText（input.files[0]）; }; <input type='file' accept='text/plain' onchange='openFile（event）'><br> <div id='output'> ... </div>

2015-03-20 21:30:38

现代的解决方案:

使用fileOrBlob.text()如下所示:

<input type="file" onchange="this.files[0].text().then(t => console.log(t))">

当用户通过输入上传一个文本文件时，它将被记录到控制台。下面是一个工作中的jsbin演示。

这里有一个更详细的版本:

<input type="file" onchange="loadFile(this.files[0])">
<script>
  async function loadFile(file) {
    let text = await file.text();
    console.log(text);
  }
</script>

目前(2020年1月)这只适用于Chrome和Firefox，如果你将来读到这篇文章，请查看这里的兼容性:https://developer.mozilla.org/en-US/docs/Web/API/Blob/text

在旧的浏览器上，这应该是有效的:

<input type="file" onchange="loadFile(this.files[0])">
<script>
  async function loadFile(file) {
    let text = await (new Response(file)).text();
    console.log(text);
  }
</script>

相关:截至2020年9月，Chrome和Edge中提供了新的本地文件系统API，以防止你想要对用户选择的文件进行永久的读取访问(甚至是写入访问)。

2020-01-18 20:06:32

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

推荐文章

最新文章

标签