时间戳

首页 > 解决方案 > 如何在 JavaScript 中从文件系统中读取文本文件

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

问题描述

我尝试了不同的方法从 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 文件位于同一目录中，这种方法在浏览器上显示一个空的警报窗口

方法 2 使用 fetch 方法

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()。请有人帮助我。

标签： javascripthtml

解决方案

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

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

如果在本地工作，则有许多用于运行本地服务器的选项。

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

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

推荐阅读