如何在本地存储中保存和还原File对象

Question

我有一个HTML5/javscript应用程序使用

<input type="file" accept="image/*;capture=camera" onchange="gotPhoto(this)">

捕捉相机图像.由于我的应用程序希望脱机运行,如何将文件(https://developer.mozilla.org/en-US/docs/Web/API/File)对象保存在本地存储中,以便以后可以检索对于ajax上传？

我从使用中抓取文件对象...

function gotPhoto(element) { 
     var file = element.files[0];
     //I want to save 'file' to local storage here :-(
}

我可以对对象进行Stringify并保存,但是当我恢复它时,它不再被识别为File对象,因此不能用于获取文件内容.

我有一种感觉它无法做到,但我愿意接受建议.

fwiw我的工作是在商店时读取文件内容并将全部内容保存到本地存储.这可以工作,但很快消耗本地存储,因为每个文件是1MB加上照片.

Answer 1

这是一个解决方法,我使用下面的代码.我知道你的编辑,你谈到localStorage,但我想分享我实际实现的解决方法.我喜欢将函数放在body上,这样即使之后通过AJAX添加了类,"change"命令仍然会触发事件.

看看我的例子:http://jsfiddle.net/x11joex11/9g8NN/

如果您运行两次JSFiddle示例,您将看到它记住图像.

我的方法确实使用jQuery.这种方法也证明了图像实际上是为了证明它有效.

HTML:

<input class="classhere" type="file" name="logo" id="logo" />
<div class="imagearea"></div>

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中,否则您可能会得到意外的结果.

Answer 2

您无法序列化文件API对象.

并不是它有助于解决具体问题,但是......虽然我没有使用过这个,如果你看一下这里似乎有一些方法(大多数浏览器还没有支持)将离线图像数据存储到某些文件中以后当用户在线时恢复它们(而不是使用localstorage)

Answer 3

将其转换为base64,然后保存.

function gotPhoto(element) {
var file = element.files[0];
var reader = new FileReader()
reader.onload = function(base64) {
localStorage["file"] = base64;
}
reader.readAsDataURL(file);
}
// Saved to localstorage
function getPhoto() {
var base64 = localStorage["file"];
var base64Parts = base64.split(",");
var fileFormat = base64Parts[0].split(";")[1];
var fileContent = base64Parts[1];
var file = new File([fileContent], "file name here", {type: fileFormat});
return file;
}
// Retreived file object