如何在 JavaScript 中从文件系统读取文本文件

Question

我尝试了不同的方法从 JavaScript 中的本地文件系统读取文本文件，并在alert()显示文件的内容，但都无济于事。

方法一

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.response;
                     document.getElementById("content").innerText = allText;
                      alert(allText);
                  }
              } else {
                  alert("Can't read the file");
              }
          }
          rawFile.send(null);
    }
    readTextFile("FormulaQuestion.txt");

FormulaQuestion.txt文件与 html 文件在同一目录中，这种方法在浏览器上显示一个空的警报窗口

使用 fetch 方法的方法 2

fetch('FormulaQuestion.txt')
        .then(response => response.text())
        .then((data) => {
            alert(data);
        })

这没有显示任何内容

使用 JQuery 的方法 3

$.get('FormulaQuestion.txt', function (data) {
        alert(data)
    }, 'text');

这也行不通。

我正在构建一个桌面应用程序，它使用 Web 浏览器控件加载嵌入到应用程序中的 html 文件。 应用程序从 sqlite 数据库读取字符串并将其保存在FormulaQuestion.txt文件中，然后刷新重新加载 html 文件的 WebControl 组件。 现在，当重新加载 html 文件时，JavaScript 应该读取文本文件并将其显示在alert() 上，一旦警报能够显示文件内容，我会将其设置为一个段落并删除alert() 。 请有人帮助我。

Answer 1

浏览器的设计不允许访问 JavaScript 的文件系统，因为允许此类访问将是一个严重的安全问题。

要将 FormulaQuestion.txt 文件提供给您的脚本，您需要将该文件托管在服务器上并通过 HTTP 请求（如您的 fetch）请求它。 这里的关键是需要一个服务器来实际通过 HTTP 协议将文件传输到您的脚本。

如果在本地工作，运行本地服务器有很多选择。

• npm 服务模块，
• 万普
• 阿帕奇

您可能还想尝试一些免费服务，如 Vercel 或 Netlify。 我相信两者都允许您拖放一个文件，它会为您托管它。