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

Question

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

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

我在这里阅读了很多 questions/answers，但到目前为止我一无所获。有人可以帮忙吗？

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

Answer 1

我认为您可能对本文中的 'local' 文件感到困惑。

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

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

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

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

Answer 2

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

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

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);

<input type="file" id="datafile">

编辑：

现在是 2022 年，我们有另一种方法可以使用 File System Access API. It's currently not available in Firefox but this method could be useful if you're only targeting Chromium based browsers (for example: in an Electron app). Note that this feature is only available in 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>

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

Constantly read local file with JS?

javascript

google-chrome

file

local

text-parsing