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

Question

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

533

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

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上测试过，它可以正常工作，但在Google Chrome上它只是不起作用，并且一直给我Exception 101。我如何使它不仅在Firefox上工作，而且在其他浏览器上（特别是Chrome）也能正常工作？

- Danny

具体发生了什么？数组里面是空的吗？还是只有“错误”的东西...？ - PinkElephantsOnParade

你是在本地机器上进行测试吗？请确保测试 status 为 0 和 200。 - Jeffrey Sweeney

1

@JeffreySweeney 是的，我正在本地机器上测试这个。我已经将文本文件存储在与JavaScript和HTML相同的位置。 - Danny

24个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- MastroGeppetto · Answer 1

这个帖子目前包含了很多正确但过时的答案，这些答案不应该被禁止，只需要被删除，为了那些寻找最新解决方案的人着想。

以下是我的回复。它的价值在于简洁和简单。它使用了在输入元素的'change'事件返回的FileList中找到的File对象。将File对象视为Blob，并使用异步的text()函数将其转换为纯文本。为了使用text()的结果，我们需要等待它的Promise被解决，因此使用了.then语法。console.log(text)语句可以替换为任何处理参数的函数。在Stackblitz上也进行了测试。

document
  .getElementById('fileName')
  .addEventListener('change', (e) => {
    e.target.files[0].text().then((text) => console.log(text));
  });

<input id="fileName" type="file" />

- user10865093 · Answer 2

You can import my library:

<script src="https://www.editeyusercontent.com/preview/1c_hhRGD3bhwOtWwfBD8QofW9rD3T1kbe/code.js?pe=yikuansun2015@gmail.com"></script>

then, the function fetchfile(path) will return the uploaded file

<script src="https://www.editeyusercontent.com/preview/1c_hhRGD3bhwOtWwfBD8QofW9rD3T1kbe/code.js"></script>
<script>console.log(fetchfile("file.txt"))</script>

请注意：如果HTML代码是本地的，在Google Chrome上会出现错误，但将HTML代码和文件保存在线上，然后运行在线上的HTML文件就可以解决问题。

- Ali Ezzat Odeh · Answer 3

为了通过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);

- Aljohn Yamaro · Answer 4

我知道，我来晚了。让我展示一下我所拥有的。

这是一个简单的文本文件阅读

var path = "C:\\path\\filename.txt"
var fs = require('fs')
fs.readFile(path , 'utf8', function(err, data) {
  if (err) throw err;
  console.log('OK: ' + filename);
  console.log(data)
});

希望这能有所帮助。