Js - 缓存文件，打开它，检测更改并上传答案

【问题标题】：Js - Cache file, open it, detect changes and uploadJs - 缓存文件，打开它，检测更改并上传
【发布时间】：2015-06-12 18:55:50
【问题描述】：

我在网页上有一个文件结构，并为以下场景寻找解决方案：

应将所选文件下载到浏览器缓存中并打开（如果是 excel 文档，请使用 excel 打开等）。现在，当用户更改文件时，应该会检测到并重新上传文件。

这甚至可以用 JavaScript 实现吗？如果是，我在哪里存储文件（临时 Internet 文件夹？）以及如何检测更改？

【问题讨论】：

这与 Javascript 无关。它是纯 HTTP。一定要了解 HTTP 的缓存部分，然后你就可以开始了。但是，有些浏览器在尊重来自服务器的缓存指令方面可能很固执，因此您应该注意浏览器缓存的怪癖。
您不能随意访问用户计算机上的文件。您必须让他们选择一个文件（例如通过文件输入），然后您可以查看修改日期以查看它是否已被修改（您必须将最后一个修改日期存储在 localStorage、服务器端等位置） .虽然如果您知道您的用户正在使用 chrome，您可以使用 chromes FileSystem api，它允许对客户端计算机上的沙盒区域进行读/写访问。
但是网页上显示的文件结构并不是真实存在的，它是一个映射在couchdb数据库上的文件结构，由node.js服务器解释并通过socket提供给前端.io。此文件是 couchdb 文档的附件。
啊，对不起，您希望在本地而不是在服务器上更改文件。在这种情况下，HTTP 是不够的。
是的，完全正确。我希望用户通过单击按钮将文件下载到临时文件夹，观看此下载的文件并在更改时再次上传。我知道我无法使用 JavaScript 访问客户端计算机，而这正是问题所在。该怎么做？

标签： javascript file filestructure

【解决方案1】：

唯一的方法是让用户选择下载的文件，然后检查修改。

HTML

<label for="excelFile">Select the excel file: </label><input type="file" id="excelFile" />

//Change event to detect when the user has selected a file
document.querySelector("#excelFile").addEventListener("change",function(e){
   //get the selected file
   var file = this.files[0];

   //get the last modified date
   var lastModified = file.lastModified;

   //check lastModified against stored lastModified
   //this assumes you store the last mod in localStorage
   if(localStorage['excelLastMod'] < lastModified){
       //It has modified update last mod
       localStorage['excelLastMod'] = lastModified;

       //do upload
   }
});

如果您知道您的用户正在使用 Chrome，您可以使用 Chrome's FileSystem api

【讨论】：

【解决方案2】：

您描述它的方式：不，这在 JavaScript 中是不可能的。
听起来你想要一个 FTP 客户端。

当用户更改文件时，应检测到并重新上传文件。

这是不可能的，因为 JS 几乎无法访问文件系统。
访问文件的唯一方法是要求用户选择一个，请参阅：
How to open a local disk file with Javascript?

所以你能做的最多是：

文件已下载。
根据浏览器和设置，文件可能会自动打开，也可能不会。
用户会看到一个文件选择对话框，他们可以在完成编辑后使用该对话框。
将所选文件与服务器上的文件进行比较，如果更改则上传。

下载文件后，您将无法控制它。
对于注册了协议的应用程序（例如 steam://），您可能能够请求在程序中打开的 URL，但这需要每个文件类型一个 if /程序。
根本不可能检测文件更改（因为您无权访问该文件），并且再次上传需要用户使用文件对话框手动选择文件。

【讨论】：

嗯，我发现了这个，似乎可以使用浏览器文件系统 Api：github.com/filerjs/filer/blob/develop/README.md#watch
@user3301565，这是一个nodejs库，在服务器端工作
不，不是：“Filer 是一个类似 POSIX 的文件系统接口，用于 node.js 和基于浏览器的 JavaScript。”基于浏览器的 JavaScript 和模块的加载通过 requireJS 工作，所以应该工作，或者？
@user3301565 “基于浏览器的 JavaScript”意味着您可以像访问文件系统一样访问 IndexedDB 或 WebSQL 数据库，而不能访问客户端计算机的实际文件系统。您可以通过加载 Filer 并从控制台运行 new Filer.FileSystem().stat('/A_PATH_THAT_EXISTS',function(err,stats){if(err)throw err;console.log(stats);}); 来验证这一点，其中 /A_PATH_THAT_EXISTS 显然应该替换为现有路径名。 / 以外的任何内容都会导致错误。
啊，我明白了，谢谢！但这不能解决我的问题吗？将文件作为附件存储在客户端本地数据库中，而不是将其保存到客户端文件系统？是否可以打开、编辑和观看本地数据库中的附件文件？

【解决方案3】：

感谢您的帮助和想法。我看到一个软件（https://www.group-office.com/）包含这个功能，所以必须有办法做到这一点。

新想法，使用 chrome 文件系统 api（@Siguza 已经说过）：

使用文件系统 api 从用户本地文件系统上的服务器数据库创建文件
在本地打开文件（应该使用文件系统：http://www.example.com/persistent/info.txt，还是？）
每 x 秒轮询一次文件的最后更改
如果检测到更改，将文件上传回服务器数据库

我看到 excel 锁定文件 Check if file has changed using HTML5 File API 的一些问题但除此之外，这应该有效，不是吗？

【讨论】：