使用HTML5 File API检查文件是否已更改 [英] Check if file has changed using HTML5 File API
问题描述
好的，所以我有一个程序，它将一些特定的数据输出到一个制表符分隔的变量文件中。
我一直使用Excel来打开和查看文件内容，然而，我发现excel的坚持要锁定它打开的每个文件都令人难以置信的烦人，因为如果我将文件保留在Excel中打开，我的程序会崩溃......但我真的很希望数据在每次运行程序后整齐地更新，所以我不必一直关闭并重新打开文件。
因此，我决定使用Javascript解析文件并将其显示在其中是最容易的一个HTML表，它是。我立刻把东西撞在一起。现在我的程序不会崩溃，如果我离开文件显示，但它仍然不会更新......我必须每次打开新生成的文件。
所以，我想知道是否有一种机制可以让我的Javascript以某种方式被另一个进程通知文件的改变？我知道这不太可能，但我想避免简单地轮询文件，原因很明显。
我对JS非常熟悉，但HTML5和新的API都是我不知道。
我不相信 File API 有文件更改的任何事件，只是进度事件等。
您可以使用轮询。请记住 lastModifiedDate File ，然后当您的轮询函数触发时，为输入获取新的 File 实例并查看 lastModifiedDate 已更改。
<！DOCTYPE HTML>
< html>
< head>
< meta http-equiv =Content-typecontent =text / html; charset = UTF-8>
< title>注意文件更改< / title>
< style type ='text / css'>
body {
font-family：sans-serif;
}
< / style>
< / head>
< body>
< input type ='file'id ='文件名'>
< input type ='button'id ='btnStart'value ='Start'>
< script type ='text / javascript'>
（function（）{
var input;
var lastMod;
document.getElementById（'btnStart'）。onclick = function（）{
startWatching（）;
};
function startWatching（）{
var file;
if（typeof window.FileReader！=='function'）{
display（此文件API尚不支持此浏览器。）;
return;
}
input = document.getElementById（'filename'）;
if（！input）{
display（Um，could not find the filename element。）;
}
else if（！input.files）{
display（这个浏览器似乎不支持文件输入的`files`属性。）;
}
else if（！input.files [0]）{
显示（请在点击'显示尺寸'之前选择一个文件'）;
}
else {
file = input.files [0];
lastMod = file。 lastModifiedDate;
display（Last modified date：+ lastMod）;
显示（更改文件）;
setInterval（tick，250）;
}
}
函数tick（）{
var file = input.files&& input.files [0];
if（file&& lastMod& amp; file.lastModifiedDate.getTime（）！== lastMod.getTime（））{
lastMod = file.lastModifiedDate;
display（File changed：+ lastMod）;
function display（msg）{
var p = document.createElement（'p'）;
p.innerHTML = msg;
document.body.appendChild（p）;
}
}）（）;
< / script>
< / body>
< / html>
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.
I don't believe the File API has any event for the file changing, just progress events and the like.
You could use polling. Remember the lastModifiedDate of the File, and then when your polling function fires, get a new File instance for the input and see if the lastModifiedDate has changed.
This works for me on Chrome, for instance: Live Copy | Source
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Watch for a file change</title>
<style type='text/css'>
body {
font-family: sans-serif;
}
</style>
</head>
<body>
<input type='file' id='filename'>
<input type='button' id='btnStart' value='Start'>
<script type='text/javascript'>
(function() {
var input;
var lastMod;
document.getElementById('btnStart').onclick = function() {
startWatching();
};
function startWatching() {
var file;
if (typeof window.FileReader !== 'function') {
display("The file API isn't supported on this browser yet.");
return;
}
input = document.getElementById('filename');
if (!input) {
display("Um, couldn't find the filename element.");
}
else if (!input.files) {
display("This browser doesn't seem to support the `files` property of file inputs.");
}
else if (!input.files[0]) {
display("Please select a file before clicking 'Show Size'");
}
else {
file = input.files[0];
lastMod = file.lastModifiedDate;
display("Last modified date: " + lastMod);
display("Change the file");
setInterval(tick, 250);
}
}
function tick() {
var file = input.files && input.files[0];
if (file && lastMod && file.lastModifiedDate.getTime() !== lastMod.getTime()) {
lastMod = file.lastModifiedDate;
display("File changed: " + lastMod);
}
}
function display(msg) {
var p = document.createElement('p');
p.innerHTML = msg;
document.body.appendChild(p);
}
})();
</script>
</body>
</html>
这篇关于使用HTML5 File API检查文件是否已更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
