检查本地文件是否已更改 [英] Check if local file has changed

问题描述

我有一个Web应用程序，用户可以使用html5 FileReader API .有什么方法可以检查文件是否已更改，并且可以在现代浏览器中使用?

I have a web app, where the user can select a local file as input, using the html5 FileReader API. Is there any way I can check if the file has changed, that works in modern browsers?

从历史上看，在某些浏览器中，可以通过轮询文件对象并比较File.lastModifiedDate(不推荐使用)或File.lastModified属性来实现此目的，如本质量检查中所述:

Historically, this was possible in some browsers by polling the file object and comparing the File.lastModifiedDate (deprecated) or File.lastModified property, as outlined in this QA: Check if file has changed using HTML5 File API. However, the spec says that lastModifiedDate and other file data should be a snapshot of the file as it looked like when the users first selected it, so this should not work (and it seems like recent versions of most browsers indeed follow the spec now, making this hack unavailable).

我希望能够通过读取文件来检查更改.这种方法有效，但是一旦在磁盘上更改了文件，Chrome和Firefox就会抛出错误消息，提示DOMException: The requested file could not be read, typically due to permission problems that have occurred after a reference to a file was acquired. 可以解决此问题吗?

I was hoping to be able to check for changes by reading the file. This kind of works, but as soon as the file is changed on disk, Chrome and Firefox throw an error saying DOMException: The requested file could not be read, typically due to permission problems that have occurred after a reference to a file was acquired. Is there any way around this?

这是我尝试过的:

let oldText

setInterval(function () {
  const fileObj = document.getElementById('myFileInput').files[0]
  const reader = new FileReader()
  reader.onload = evt => {
      const text = evt.target.result
      if (text !== oldText) {
        console.log("The file has changed!")
        oldText = text
      }
    }
    reader.readAsText(fileObj)
}, 1000)

...或更简单:

const fileObj = document.getElementById('myFileInput').files[0]
const reader = new FileReader()
reader.readAsText(fileObj)  // works
// now lets edit the file and try again
reader.readAsText(fileObj)  // fails

reader.readAsText()会按预期工作，直到文件更改时，会引发上述错误.我猜想这是一种安全措施，尽管我不完全了解它试图保护用户免受什么侵害.我该怎么办?

reader.readAsText() works as expected, until the file is changed, when it throws the error mentioned above. I guess this is a security measure of sorts, though I don't fully understand what it's trying to protect the user from. What can I do instead?

推荐答案

如果/当部分启用.

This will be possible again if/when the Native File System API is implemented in browsers. It will be partially enabled in Google Chrome 85, scheduled for release in October 2020.

与FileReader API不同，它需要显式的用户交互，因此您需要执行以下操作:

Unlike the FileReader API it requires a explicit user interaction, so you'd do something like this:

myFileInput.addEventListener('change', async (e) => {
  const fh = await window.chooseFileSystemEntries()
  // fh is now a FileSystemFileHandle object
  // Use fh.getFile() to get a File object
})

这篇关于检查本地文件是否已更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！