如何将一个文件对象保存和恢复到本地存储中

8 浏览
0 Comments

如何将一个文件对象保存和恢复到本地存储中

我有一个使用HTML5 / javscript的应用程序，它使用来捕获相机图像。因为我的应用程序希望在离线状态下运行，所以我该如何将File（https://developer.mozilla.org/en-US/docs/Web/API/File）对象保存在本地存储中，以便稍后进行ajax上传时可以检索到它？

我正在使用以下方法从中获取文件对象...

function gotPhoto(element) { 
     var file = element.files[0];
     //在这里我想将'file'保存到本地存储中 :-(
}

我可以对对象进行字符串化并保存，但在恢复时，它不再被识别为File对象，因此无法用于获取文件内容。

我有一种感觉这是无法实现的，但我愿意听取建议。

顺便说一句，我的解决方法是在存储时读取文件内容并将完整内容保存到本地存储中。这可以工作，但会迅速消耗本地存储空间，因为每个文件都是1MB以上的照片。

0

3 答案

0 Comments

问题的原因是提问者想要在本地存储中保存和恢复一个File对象，但是他们之前提供的代码只能保存和恢复文件内容，而不是File对象本身。

解决方法是将File对象转换为base64格式然后保存，再从base64格式中恢复回File对象。具体的代码如下：

function gotPhoto(element) {
   var file = element.files[0];
   var reader = new FileReader()
   reader.onload = function(base64) {
      localStorage["file"] = JSON.stringify(file);
   }
   reader.readAsDataURL(file);
}
function getPhoto() {
   var fileJson = localStorage["file"];
   var file = JSON.parse(fileJson);
   return file;
}

以上代码将File对象通过JSON.stringify转换为字符串后保存在本地存储中，然后通过JSON.parse将字符串转换回File对象。

这样就可以在本地存储中保存和恢复File对象了。

0
0 Comments

问题的原因是作者想要在本地存储中保存和恢复一个File对象，但是希望通过存储图库中的图像的引用来避免复制整个图像数据。解决方法是使用HTML5的文件系统API将图像读取并放入一个新的javascript img对象中，并使用readAsDataURL方法将图像以base64编码的形式存储。读取操作是异步的，所以需要在onload回调函数中执行任何依赖于图像的重要代码。

HTML代码如下：

JS代码如下：

$(document).ready(function(){
  //You might want to do if check to see if localstorage set for theImage here
  var img = new Image();                
  img.src = localStorage.theImage;
  $('.imagearea').html(img);
  $("body").on("change",".classhere",function(){
      //Equivalent of getElementById
      var fileInput = $(this)[0];//returns a HTML DOM object by putting the [0] since it's really an associative array.
      var file = fileInput.files[0]; //there is only '1' file since they are not multiple type.
      var reader = new FileReader();
      reader.onload = function(e) {
           // Create a new image.
           var img = new Image();
           img.src = reader.result;
           localStorage.theImage = reader.result; //stores the image to localStorage
           $(".imagearea").html(img);
       }
       reader.readAsDataURL(file);//attempts to read the file in question.
    });
});

这种方法使用HTML5文件系统API来读取图像并将其放入一个新的javascript img对象中。关键在于使用readAsDataURL方法。如果使用Chrome的检查器，可以注意到图像以base64编码的形式存储。

读取操作是异步的，因此它使用了回调函数onload。因此，请确保任何需要图像的重要代码都在onLoad中，否则可能会得到意外的结果。

这个解决方法可以帮助人们保存和恢复File对象，并避免复制整个图像数据的问题。

0
0 Comments

问题的原因是无法将File对象序列化并保存到本地存储中。这是由于安全风险的原因，如果允许将File对象作为字符串保存在本地存储中，用户可能会修改该字符串以获得访问同一目录下其他文件的权限。因此，无法直接将File对象保存到本地存储中。

解决方法是使用其他替代方案。根据参考链接中的文章，可以尝试使用文件系统API来存储离线图像数据，并在用户在线时恢复它们，而不是使用本地存储。另一种可能的解决方法是使用隐藏的canvas对象，将图像数据绘制到canvas中，然后在需要时从canvas中获取图像数据。这样可以避免在本地存储中保存图像的副本。

然而，这些解决方法都存在一些限制和问题。一些浏览器尚未完全支持文件系统API，而使用canvas对象可能会导致一些性能和内存方面的问题。最终，文章中提到，无法序列化和保存File对象是目前的正确答案。

，问题的原因是无法将File对象序列化保存到本地存储中，解决方法是尝试使用文件系统API或隐藏的canvas对象进行替代。然而，这些方法都存在一些限制和问题。

0