不断用JS读取本地文件？答案

【问题标题】：Constantly read local file with JS?不断用JS读取本地文件？
【发布时间】：2018-12-13 20:07:19
【问题描述】：

我一直在寻找所有地方，但我找不到与 Chrome 一起重复读取本地文本文件（与我的 js 和 html 文件位于同一文件夹中）的解决方案。

我需要不断地读取文件以进行更新，另一个程序会自动更新，我不知道如何。它只是一个普通的 text.txt 文件。

我在这里阅读了很多关于它的问题/答案，但到目前为止我什么也没找到。有人可以帮忙吗？

编辑：我的意思也是没有节点，只是香草 JS。

【问题讨论】：

所以继续使用 Ajax 获取它。
请在您的问题中插入您的代码！没有代码很难帮助你。
您究竟尝试过什么？您现在如何阅读此文件？ this question 是您阅读的“这里有很多问题/答案” 之一吗？没用怎么办？
@zero298 是的，我已经阅读了这个问题，它不起作用，因为 Chrome 不允许您对本地文件执行 XMLHttp 请求。我也尝试过 fetch api，但它在 chrome 上也不起作用，我尝试过 FileReader 但仍然不起作用。

标签： javascript file google-chrome local text-parsing

【解决方案1】：

您可以通过starting Chrome with it's security features disabled 为本地文件启用 XmlHttpRequest。这不是一个理想的解决方案，但它是在不运行某种服务器的情况下自动执行所需操作的唯一方法。使用 Node 来观察文件的变化并通过 WebSocket 将数据推送到浏览器将是处理此问题的正确方法。

您也可以使用 FileReader API 打开此本地文件，但您需要先通过 <input type="file"> 元素手动选择它。

function readInputFile(event) {
  let file = event.target.files[0];

  if (!file) {
    return;
  }
  
  let reader = new FileReader();
  
  reader.addEventListener('load', event => {
    let content = event.target.result;
    alert(content);
  });
  
  reader.readAsText(file);
}

document.getElementById('datafile').addEventListener('change', readInputFile, false);

&lt;input type="file" id="datafile"&gt;

编辑：

现在是 2022 年，我们还有另一种方法可以使用 File System Access API 来实现这一目标。它目前在 Firefox 中不可用，但如果您只针对基于 Chromium 的浏览器（例如：在 Electron 应用程序中），此方法可能很有用。请注意，此功能仅在 secure contexts 中可用，例如来自 localhost 或 https。

<!DOCTYPE html>
<title> File System Access API Test </title>
<button id="pick"> Pick File </button>
<button id="stop" disabled> Stop Watching </button>
<script>
  const pickButton = document.querySelector('button#pick');
  const stopButton = document.querySelector('button#stop');

  let selected, i;
  let pollRate = 15; // seconds

  pickButton.addEventListener('click', accessFile);
  stopButton.addEventListener('click', stopWatching);

  async function accessFile() {
    stopWatching();
    
    let [fileHandle] = await window.showOpenFilePicker();
    
    if (fileHandle) {
      let f = await fileHandle.getFile();
      if (!f) { console.log('failed accessing file'); return ; }
      selected = { handle : fileHandle, file : f };
      console.log('selected', f.name);
      readFile(f);
      startWatching();
    } else {
      console.log('no file selected');
    }
  }
  
  async function checkFile() {
    if (!selected) { return; }
    let f = await selected.handle.getFile();
    if (f.lastModified > selected.file.lastModified) {
      console.log(selected.file.name, 'was updated');
      selected.file = f;
      readFile(f);
    } else {
      console.log(selected.file.name, 'had no changes');
    }
  }
  
  function readFile(f) {
    let reader = new FileReader();  
    reader.addEventListener('load', event => {
      console.log(event.target.result);
    }); reader.readAsText(f);
  }
  
  function startWatching() {
    if (i) { clearInterval(i); }
    stopButton.disabled = false;
    i = setInterval(async ts => {
      if (!selected) { return; }
      checkFile();
    }, pollRate * 1000);
  }
  
  function stopWatching() {
    clearInterval(i);
    i = null;
    selected = null;
    stopButton.disabled = true;
  }
</script>

【讨论】：

这个我测试过，其实不需要每次文件变化都重新选择。我用 setInterval 对其进行了测试，每 5 秒读取一次文件，它显示了更改。我认为这可以工作，谢谢。
有趣的是，似乎只要不重置输入字段，您就可以无限期地重新读取文件。很高兴知道。
在 Chrome 83 中，我可以再次读取文件，但其内容不会改变，并且 onload 事件也不会触发。似乎 Chrome 正在优化后续读取。

【解决方案2】：

我认为您可能会混淆在这种情况下“本地”文件是什么。

本地文件将加载一个 url，例如file://，或从表单中的文件输入中选择。

.html 和 .css 旁边的文件不是本地文件，它是您用于托管 .html 的 Web 服务器上的托管文件。您将使用域的相对路径来引用它，例如“/file.css”

Node 会有更多选择，因为它可以与内置 fs（文件系统）库同步读取和访问本地文件。

您需要像对待 Internet 上的任何其他文件一样对待您的文件，然后以同样的方式下载它。然后，稍后在需要检查更新时再次下载。重复。

【讨论】：

我知道本地文件是什么，而且我不会在任何地方托管它。我没有使用节点，我只是打开 html 文件并加载 javascript。我的主要帖子说我正在阅读的文件是通过另一个程序更新的，所以我要做的就是不断读取该文件以进行更改。