注意打开文件中的文件更改[重复]答案

【问题标题】：Watch for file changes in opened file [duplicate]注意打开文件中的文件更改[重复]
【发布时间】：2021-07-28 02:18:03
【问题描述】：

有没有办法在浏览器中监视文件更改？

工作流程是：

1) 用户打开文件

2) webapp 写入文件

3) 本地安装的应用程序读取文件并写入一些更改

4) webapp 读取最后的变化

5) 最终再次进入第 2 步

这应该在浏览器中完成。

目前我有一个用户必须多次按下的按钮，但是：

1) 我希望这可以自动完成，无需点击 2) Chrome 会缓存文件，因此不会读取进一步的更改。

最好的方法是什么？

这是我现在正在做的事情：

https://codepen.io/muaddibber/pen/OZJgYQ

window.onload = function() {
    var fileInput = document.getElementById('fileInput');
    var fileDisplayArea = document.getElementById('fileDisplayArea');

    fileInput.addEventListener('change', function(e) {
        var file = fileInput.files[0];
        var textType = /text.*/;

        if (file.type.match(textType)) {
            var reader = new FileReader();

            reader.onload = function(e) {
                fileDisplayArea.innerText = reader.result;
            }

            reader.readAsText(file);    
        } else {
            fileDisplayArea.innerText = "File not supported!"
        }
    });
}

我打开一个文件 prova.txt，它可以工作。

然后我在本地编辑文件并重新打开它：它没有改变，chrome仍然显示旧版本。

【问题讨论】：

浏览器没有（也不应该）对用户本地文件系统进行这种访问
用户选择文件，然后当再次按下按钮时它应该重新加载，但 chrome 缓存文件。在边缘它工作。也许我可以读取前 N 个字节，等待，然后读取其余部分？
没有代码，所以不知道你在做什么——但是浏览器不能像那样“监控”本地文件，所以你不得不弄清楚为什么 chrome 显然会“缓存”一些东西
在此处发布您的 js 代码或 webapp 链接。
在答案中添加了示例

标签： javascript html

【解决方案1】：

出于安全原因，浏览器无法监控文件系统以了解本地文件的更改。

通常，当您使用网页或网络应用程序选择文件时，它会立即上传到服务器，或者在按下“提交”或“上传”按钮后，导致表单提交。之后，工作就完成了。如果您希望网络应用程序查看文件的任何后续更改，则必须再次手动上传，因为无法查看更改或再次自动上传。是的，这很痛苦，但如果不这样做，它可能会被恶意 Web 脚本利用来窃取用户数据。

即使使用浏览器插件处理这类事情也变得越来越困难，因为 WebExtensions（Chrome 和 Firefox 使用）通常不允许访问文件系统。这就是为什么大多数插件（如 Stylish、Stylus、Greasemonkey、Tampermonkey 等）现在都有自己的内置编辑器并将其“文件”保存到 HTML5 LocalStorage 作为解决方法。如果您想要持续更新，您可能还必须为您的网络应用程序实现一个“实时”编辑器。

【讨论】：

在 2017 年 11 月 3 日，您可以在 Chrome 中监控文件的上次读取日期，并读取更改。我有一个project doing this which worked，但它现在不起作用。不过，它从来没有在 Firefox 中工作过。

【解决方案2】：

有一种方法可以用来读取文件夹的内容。一旦您从拖放中获得目录输入或从目录文件输入中选择文件夹，您可以一次又一次地循环遍历每个文件以查看是否发生了某些变化。这意味着您不知道是否发生了某些变化……因此您需要自己制定该逻辑，以有效地检查 lastModifiedDate 是否已更改或文件大小是否不同

这是一个递归读取每个文件夹中的所有文件并查找以.log 结尾的文件的示例。如果它找到一个这样的文件，它将每 1000 毫秒读取一次相同的文件夹并回显它的洞内容。

如果您随后更改文件（添加一行或更改某些内容），它将回显新内容

由于某种原因，由于沙盒限制，它在 SO 中不起作用，所以我也创建了一个 jsfiddle

function traverseFileTree(entery, path) {
  path = path || ""
  console.log('entery', entery)
  if (entery.isFile) {
    // Get file
    entery.file(file => {
      console.log("File:", path + file.name)
      if (file.name.includes('.log')) {
        setInterval(() => {
          entery.file(file => {
            file.text().then(console.log)
          })
        }, 1000)
      }
    })
  } else if (entery.isDirectory) {
    // Get folder contents
    var dirReader = entery.createReader()
    dirReader.readEntries(entries => {
      console.log('entries', entries)
      for (let entery of entries) {
        traverseFileTree(entery, path + entery.name + '/')
      }
    })
  }
}

var dropzone = document.getElementById('dropzone')

dropzone.addEventListener("drop", function(event) {
  event.preventDefault()

  const items = event.dataTransfer.items
  console.log(items)

  for (item of items) {
    // webkitGetAsEntry is where the magic happens
    const entery = item.webkitGetAsEntry()

    if (entery) {
      traverseFileTree(entery)
    }
  }
}, false)

// Required for drop event to event do what we want
dropzone.ondragover = event => {
  event.preventDefault()
  return false
}

#dropzone{
  background: black;
  height: 30px;
  color: white;
  padding: 10px;
}

<div id="dropzone">
  drop a directory here
</div>

【讨论】：