blocks|key|28162|text|虽然T.J.Crowder的回答是正确的，但Chrome的实现似乎违反了规范。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|28163|每个Blob必须具有一个内部快照状态，如果存在这样的底层存储，则必须首先将其设置为基础存储的状态，并且必须通过结构化克隆来保存。可以为文件找到快照状态的进一步规范定义。|blockquote|28164|当选择一个文件时，输入在该位置有内容的快照。磁盘上的本地更改不更新快照。|28165|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$]]|$1|E|3|F|5|6|7|K|8|@]|9|@]|A|$]]|$1|G|3|-4|5|6|7|L|8|@]|9|@]|A|$]]]|H|$]]

While T.J. Crowder's answer is correct, Chrome's implementation appears to break the spec.

<blockquote>
 Each Blob must have an internal snapshot state, which must be initially set to the state of the underlying storage, if any such underlying storage exists, and must be preserved through structured clone. Further normative definition of snapshot state can be found for files.
</blockquote>

When a file is selected the input has a snapshot of the contents at that point. Local changes on disk don't update the snapshot.

blocks|key|1346830|text|对于这个问题有两种解决方案，而<input+type="file">不是其中之一。根据规范，它创建文件的“快照”。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1346831|本机文件系统|1346832|这个api接口是实验性的，需要在闪烁(也就是铬浏览器)中启用标志。其思想是您获得一个文件句柄，当您需要该文件时，您可以调用异步"getFile“函数来检索实际文件。|1346833|这个功能是一个“电源功能”，要求你的网站是安全的，它不能在沙箱的iframes中工作。|1346834|因此，如果不进行测试，这里有一些“黑暗中的代码”：|1346835|//+triggerd+on+click
async+function+pickFile+()+{
++const+handle+=+showOpenFilePicker()
++let+lastModificationTime+=+0
++
++async+function+compare+()+{
++++const+file+=+await+handle.getFile()
++++if+(file.lastModified+>+lastModificationTime)+{
++++++lastModificationTime+=+%2Bfile.lastModified
++++++console.log(await+file.text())
++++}
++}
++
++setInterval(compare,+1000)
}|code-block|syntax|javascript|1346836|从拖放中获取入口|1346837|与本机文件系统类似，您也可以检索文件句柄并执行相同的操作，但是这个特性在今天的所有浏览器中都有效。但是这个代码片段不能在堆栈溢出中工作，因为它使用了一些沙箱使其不兼容，所以下面是一个小提琴，没有多少注释|1346838|function+drop(event)+{
++event.stopPropagation();
++event.preventDefault();
++++
++//+get+the+file+as+an+fileEntry+(aka+file+handle)
++const+fileEntry+=+event.dataTransfer.items[0].webkitGetAsEntry()
++let+lastModificationTime+=+0
++
++async+function+read+(file)+{
++++//+use+the+new+async+read+method+on+blobs.
++++console.log(await+file.text())
++}
++
++function+compare+(meta)+{
++++if+(meta.modificationTime+>+lastModificationTime)+{
++++++lastModificationTime+=+meta.modificationTime
++++++fileEntry.file(read)
++++}
++}
++
++setInterval(fileEntry.getMetadata.bind(fileEntry,+compare),+1000)
}|1346839|编辑:现在还有一种方法可以将拖放文件作为一个更好的FileSystemFileHandle使用。|1346840|elem.addEventListener('dragover',+evt+=>+{
++//+Prevent+navigation.
++evt.preventDefault()
})
elem.addEventListener('drop',+async+evt+=>+{
++//+Prevent+navigation.
++evt.preventDefault()

++//+Process+all+of+the+items.
++for+(const+item+of+evt.dataTransfer.items)+{
++++//+kind+will+be+'file'+for+file/directory+entries.
++++if+(item.kind+===+'file')+{
++++++const+entry+=+await+item.getAsFileSystemHandle();
++++++if+(entry.kind+===+'file')+{
++++++++//+use+same+solution+as+the+first+Native+File+System+solution
++++++}
++++}
++}
})|1346841|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/wicg/native-file-system/issues/|1|https://jsfiddle.net/7cs4bote/^0|F|J|0|0|2|5|0|0|0|0|0|0|2J|3|1|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1C|8|@$9|1D|A|1E|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1F|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|1G|8|@]|D|@$9|1H|A|1I|1|1J]]|E|$]]|$1|J|3|K|5|6|7|1K|8|@]|D|@]|E|$]]|$1|L|3|M|5|6|7|1L|8|@]|D|@]|E|$]]|$1|N|3|O|5|P|7|1M|8|@]|D|@]|E|$Q|R]]|$1|S|3|T|5|6|7|1N|8|@]|D|@]|E|$]]|$1|U|3|V|5|6|7|1O|8|@]|D|@$9|1P|A|1Q|1|1R]]|E|$]]|$1|W|3|X|5|P|7|1S|8|@]|D|@]|E|$Q|R]]|$1|Y|3|Z|5|6|7|1T|8|@]|D|@]|E|$]]|$1|10|3|11|5|P|7|1U|8|@]|D|@]|E|$Q|R]]|$1|12|3|-4|5|6|7|1V|8|@]|D|@]|E|$]]]|13|$14|$5|15|16|17|E|$18|19]]|1A|$5|15|16|17|E|$18|1B]]]]

There is two solutions to this problem, and <code>&lt;input type=&quot;file&quot;&gt;</code> is not one of them. according to the spec, it creates a &quot;snapshot&quot; of the file.
<hr />
<h1 id="native-file-system-qhrg">Native File System</h1>
This <a href="https://github.com/wicg/native-file-system/issues/" rel="nofollow noreferrer">api</a> is experimental and requires flags to be enabled in blink (aka chromium browsers). The idea is that you get a file handle and when you need the file then you call the async &quot;getFile&quot; function to retrieve the actual file.
This feature is a &quot;power feature&quot; and require your site to be secure, and it can't work in sandboxed iframes.
So without testing here is some &quot;code in the dark&quot;:
<pre><code>// triggerd on click
async function pickFile () {
 const handle = showOpenFilePicker()
 let lastModificationTime = 0
 
 async function compare () {
 const file = await handle.getFile()
 if (file.lastModified &gt; lastModificationTime) {
 lastModificationTime = +file.lastModified
 console.log(await file.text())
 }
 }
 
 setInterval(compare, 1000)
}
</code></pre>
<hr />
<h1 id="get-entry-from-drag-and-drop-di66">Get Entry from Drag and drop</h1>
Similar to the native file system you can also retrieve a file handle and do the same thing, but this feature works in all browsers today. but this code snippet don't work in stackoverflow since it use some sandboxing do making it incompatible, so here is a <a href="https://jsfiddle.net/7cs4bote/" rel="nofollow noreferrer">fiddle</a> with few comments
<pre><code>function drop(event) {
 event.stopPropagation();
 event.preventDefault();
 
 // get the file as an fileEntry (aka file handle)
 const fileEntry = event.dataTransfer.items[0].webkitGetAsEntry()
 let lastModificationTime = 0
 
 async function read (file) {
 // use the new async read method on blobs.
 console.log(await file.text())
 }
 
 function compare (meta) {
 if (meta.modificationTime &gt; lastModificationTime) {
 lastModificationTime = meta.modificationTime
 fileEntry.file(read)
 }
 }
 
 setInterval(fileEntry.getMetadata.bind(fileEntry, compare), 1000)
}
</code></pre>
Edit: there is now also a way to get drag and dropped files as a FileSystemFileHandle that is much nicer to work with
<pre class="lang-js prettyprint-override"><code>elem.addEventListener('dragover', evt =&gt; {
 // Prevent navigation.
 evt.preventDefault()
})
elem.addEventListener('drop', async evt =&gt; {
 // Prevent navigation.
 evt.preventDefault()

 // Process all of the items.
 for (const item of evt.dataTransfer.items) {
 // kind will be 'file' for file/directory entries.
 if (item.kind === 'file') {
 const entry = await item.getAsFileSystemHandle();
 if (entry.kind === 'file') {
 // use same solution as the first Native File System solution
 }
 }
 }
})
</code></pre>

Okay, so I have a program which outputs some specific data to a tab separated variable file.

I had been using Excel to open and view the file contents, however I found excel's insistence on locking every file it opens to be incredibly annoying as my program would crash if I left the file open in Excel... but I would really like the data to neatly update after each run of the program, so I don't have to close and re-open the file all the time.

So, I decided it would be easiest to use Javascript to parse the file and display it in a html table, and it was. I knocked something together in no time. Now my program doesn't crash if I leave the file on display, however, it still doesn't update... and I have to open the newly generated file each time.

So, I was wondering if there was a mechanism by which my Javascript could be somehow notified of a change to the file by another process? I know this is unlikely, but I would like to avoid simply polling the file for obvious reasons.

I am very familiar with JS, but HTML5 and the new APIs are all new to me.

Check if file has changed using HTML5 File API

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

好的，我有一个程序，它输出一些特定的数据到一个选项卡分隔的变量文件中。我一直在使用Excel打开和查看文件内容，但是我发现Excel坚持锁定它打开的每一个文件是令人难以置信的恼人的，因为如果我把文件打开在Excel中，我的程序就会崩溃。但是，我真的希望在每次运行程序之后，数据都能整洁地更新，所以我不需要一直关闭和重新打...

问使用HTML5文件API检查文件是否已更改
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用HTML5文件API检查文件是否已更改EN