Javascript 和 HTML 文件 API - 基于文件对象的 javascript 对象是否仍然包含文件的位置？答案

【问题标题】：Javascript & HTML File API- can a javascript object based on a file object still contain the file's location?Javascript 和 HTML 文件 API - 基于文件对象的 javascript 对象是否仍然包含文件的位置？
【发布时间】：2016-04-05 10:31:42
【问题描述】：

假设我有一组用户选择的文件。

在我的应用程序中，每个选定的文件都对应一个人。一旦用户选择了文件，就会出现一个表格。左列是每个文件的名称。在右侧栏中，用户必须填写相关人员的姓名。填写完所有名称后，用户可以上传文件。由于可能需要填写数百个名称，因此我希望能够定期将用户的进度保存到 localStorage，以防页面刷新。

我可以将每个文件对象 (var thisFile) 传递给上传脚本，浏览器就会知道该文件的位置。

但是，我希望能够将所选文件的列表保存在 localStorage 中，并且 JSON.stringify 会删除一个文件对象。

假设我首先基于文件对象（var file 下面）创建了一个 javascript 对象。

如果我随后将 var file 传递给上传脚本，浏览器是否仍然能够找到该文件，或者该文件的完整路径是否会丢失？

for (var i = 0; i < userSelectedFiles.length; i++) {
  //File object (Stripped out by JSON.stringify).
  var thisFile = userSelectedFiles[i];
  //Create a javascript object based on the file object (Not stripped out by JSON.stringify).
  var file: {
    'lastModified': thisFile.lastModified,
    'lastModifiedDate': thisFile.lastModifiedDate,
    'name': thisFile.name,
    'size': thisFile.size,
    'type': thisFile.type
  },
}

【问题讨论】：

你想做什么？
您可以使用onbeforeunload事件在页面卸载前保存数据。此外，您不应该在 File 对象上使用 JSON.stringify。
@AJP 请考虑编辑/更新您的问题，以在问题正文中包含上述评论，而不仅仅是 .as 评论

标签： javascript fileapi

【解决方案1】：

经过更多研究，我发现必须在浏览器刷新后重新选择文件-文件的位置无法存储在localStorage中。

【讨论】：

【解决方案2】：

您可以将文件保存到离线存储。

阅读这篇关于离线存储的文章offline_storage 和quota-research
阅读文档LocalFileSystem
你可以在这里测试离线存储test page
如何使用link

这是 WebKit 浏览器（chrome 和 opera）创建文件的示例 -> info.txt 使用您的内容，您需要询问用户的存储配额，在此示例中为 10mb。

    var maxSize = 1024 * 1024 * 10;

    var onError = function() {};
    var requestFs = window.requestFileSystem ||
                      window.webkitRequestFileSystem ||
                      window.mozRequestFileSystem ||
                      window.msRequestFileSystem || undefined;

    var onRequest = function(grantedSize) {

      requestFs(window.PERSISTENT, grantedSize, function(filesystem) {

         filesystem.root.getFile("info.txt", {create: true}, function(DatFile) {

           DatFile.createWriter(function(DatContent) {

             var blob = /** your file or blob*/;

             DatContent.write(blob);

           });

         });

      }, onError)

    };

    navigator.webkitPersistentStorage.requestQuota(maxSize, onRequest, onError);

【讨论】：