Javascript;HTML文件API-基于文件对象的javascript对象是否仍然包含文件'的位置

Javascript & HTML File API- can a javascript object based on a file object still contain the file's location?

本文关键字：文件 对象 是否 位置 javascript 包含 API- HTML 于文件 Javascript      更新时间：2023-12-25

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

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

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

然而，我希望能够将所选文件的列表保存在localStorage中，JSON.stringify将剥离一个文件对象。

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

如果我将varfile传递给上传脚本，浏览器是否仍然能够定位该文件，或者该文件的完整路径是否已经丢失？

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
  },
}

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

您可以将文件保存到脱机存储。

  1. 阅读这篇关于离线存储offline_storage和配额研究的文章
  2. 阅读文档LocalFileSystem
  3. 您可以在此处测试脱机存储测试页面
  4. 如何使用链接

以下是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);
相关文章：