Question

有没有办法在浏览器中查看文件更改？

工作流程将是：

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仍然显示旧版本。

Answer 1

出于安全原因，浏览器无法监视文件系统是否有对本地文件的更改。

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

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

Answer 2

有一种方法可以用来读取文件夹的内容。通过拖放或目录文件输入中的文件夹选择获得目录entery后，您可以反复循环遍历每个文件以查看是否有更改。这意味着您不知道某些内容是否已更改...因此您需要自己制作该逻辑，以便有效地检查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 => {
            new Response(file).text().then(text => {
              console.log(text)
            })
          })
        }, 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>

在已打开的文件中查看文件更改

2 个答案: