如何读取本地文本文件？

IT技术 javascript file-io xmlhttprequest
2021-01-13 21:16:33

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

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 上测试了它并且它可以工作，但是在谷歌浏览器中它不起作用并且它一直给我一个异常 101。我怎样才能让它不仅在 Firefox 上工作，而且在其他浏览器上工作（尤其是 Chrome ）？

6个回答

您需要检查状态 0（当使用 本地加载文件时XMLHttpRequest，您不会得到状态返回，因为它不是来自Webserver）

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");
我实际上是在 mac 上处理这个问题，所以我还要指定 file:// 吗？？
2021-03-14 21:16:33
由于我们正在从网络服务器读取，我们应该将 async 设置为true. 如果这是一个简单的local搜索，那么将 async 设置为false可以，但onreadystatechange在设置为 false 时不需要。这是文档：w3schools.com/ajax/ajax_xmlhttprequest_send.asp
2021-03-16 21:16:33
尝试放入file:///User/Danny/Desktop/javascriptWork/testing.txt浏览器的 url 栏中，看看是否可以看到该文件..
2021-04-04 21:16:33
它不需要是绝对路径..这对我来说很好用： readTextFile('Properties/version.txt'); 谢谢！
2021-04-04 21:16:33
这在 Chrome（可能是其他浏览器）中不起作用，您将收到“仅协议方案支持跨源请求：http、数据、chrome、chrome-extension、https、chrome-extension-resource。”
2021-04-08 21:16:33

在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

2018 年 7 月 30 日更新（免责声明）：

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

更新 2（免责声明）：

这种技术不工作的Firefox以上68版（2019年7月9日），对于相同的（安全）的理由，铬：CORS request not HTTP。请参阅https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp。

但是如何使用文本并将其放入字符串变量中以便在其他地方使用？（无论我对它做什么，我都会不断得到“未定义”。）
2021-03-09 21:16:33
Fetch API cannot load file:///C:/Users/path/to/file/file.txt. URL scheme must be "http" or "https" for CORS request.
2021-03-09 21:16:33
@not2qubit 获取文本文件是一个异步操作。您未定义是因为您在文件被完全读取之前使用了该变量。您必须在 promise 回调中使用它或使用诸如 javascript“async await”运算符之类的东西。
2021-03-19 21:16:33
杰出的！引用 Fetch 标准：“提供一致的处理：URL 方案、重定向、跨域语义、CSP、服务工作者、混合内容，Referer”。我想这意味着告别好的 ol'FileReaders 和 HttpRequests（我不会有点想念它们；）
2021-03-20 21:16:33
2021-04-07 21:16:33

访问Javascripture！然后转到readAsText部分并尝试示例。您将能够了解FileReader的readAsText函数是如何工作的。

    <html>
    <head>
    <script>
      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]);
      };
    </script>
    </head>
    <body>
    <input type='file' accept='text/plain' onchange='openFile(event)'><br>
    <div id='output'>
    ...
    </div>
    </body>
    </html>
@S.Kirby 正如 OP 在回答有关它是在本地运行还是在远程服务器上运行的问题时所说：它都是本地的。所有在一个文件夹中没有别的。. 此外，其他人（如我）可能对如何在本地进行操作有疑问。
2021-03-21 21:16:33
链接很好，但您应该“始终引用重要链接中最相关的部分，以防目标站点无法访问或永久离线。” 请参阅如何写出好的答案。
2021-03-22 21:16:33
此示例处理用户输入的文本文件，但我认为问题与服务器本地的文件有关。
2021-03-28 21:16:33 

var input = document.getElementById("myFile");
var output = document.getElementById("output");


input.addEventListener("change", function () {
  if (this.files && this.files[0]) {
    var myFile = this.files[0];
    var reader = new FileReader();
    
    reader.addEventListener('load', function (e) {
      output.textContent = e.target.result;
    });
    
    reader.readAsBinaryString(myFile);
  }   
});
<input type="file" id="myFile">
<hr>
<textarea style="width:500px;height: 400px" id="output"></textarea>

使用我自己现有的文件上传输入 html - 从var reader = new FileReader();通过复制行reader.readAsBinaryString(..)- 它读取我的文本文件的内容。干净、优雅，就像一种魅力。对我来说这个线程中的最佳答案 - 谢谢！
2021-03-24 21:16:33
我不确定这是否能回答这个 4 年前的问题。OP 不上传文档，他们试图从路径读取同一目录中的文本文件。如果你要回答这个古老的问题，至少写一个简短的总结，说明为什么你认为你的答案现在比其他答案更好，或者自问题以来语言发生了怎样的变化，以保证一个新的答案。
2021-03-25 21:16:33

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

然后使用 JS 可以处理（示例视图）文件或文件列表、它们的一些属性以及文件或文件内容。

出于安全原因，JS 不能做的是自动访问（无需用户输入）到他计算机的文件系统。

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

hta 文件中可以包含 JS 或 VBS。

但是 hta 可执行文件仅适用于 Windows 系统。

这是标准的浏览器行为。

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

其它你可能感兴趣的问题
上一篇对于从 file:// URL 运行的应用程序发出的请求，“Access-Control-Allow-Origin 不允许使用 Origin null”错误 下一篇如何在页面加载后执行 JavaScript？