Jak zapisać i przywrócić obiekt File w pamięci lokalnej

Oto obejście, które mam pracując z poniższym kodem. Zdaję sobie sprawę, że w swojej edycji mówiłeś o localStorage, ale chciałem podzielić się tym, jak faktycznie wdrożyłem to obejście. Lubię umieszczać funkcje na ciele tak, że nawet jeśli klasa zostanie dodana później przez AJAX, Komenda "change" nadal wywoła zdarzenie.

Zobacz mój przykład tutaj: http://jsfiddle.net/x11joex11/9g8NN/

Jeśli uruchomisz przykład JSFiddle dwa razy zobaczysz, że pamięta obraz.

Moje podejście używa jQuery. Takie podejście pokazuje również, że obraz jest rzeczywiście tam, aby udowodnić, że działa.

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.
    });
});

To podejście wykorzystuje API systemu plików HTML5 do odczytu obrazu i umieszczenia go w nowym obiekcie img javascript. Kluczem jest readAsDataURL. Jeśli używasz chrome inspector, zauważysz, że obrazy są przechowywane w kodowaniu base64.

Czytnik jest asynchroniczny , jest to dlaczego używa funkcji zwrotnej onload. Upewnij się więc, że każdy ważny kod, który wymaga obrazu, znajduje się wewnątrz onLoad, w przeciwnym razie możesz uzyskać nieoczekiwane wyniki.

Przekonwertuj go do base64, a następnie zapisz.

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

Możesz użyć tej lib:

Https://github.com/carlo/jquery-base64

To zrób coś podobnego:

//Set file
var baseFile = $.base64.encode(fileObject);
window.localStorage.setItem("file",basefile);

//get file
var outFile = window.localStorage.getItem("file");

Innym rozwiązaniem byłoby użycie json (wolę tę metodę) użycie: http://code.google.com/p/jquery-json/

//Set file
window.localStorage.setItem("file",$.toJSON(fileobject));

//get file
var outFile = $.evalJSON(window.localStorage.getItem("file"));

Myślę, że nie ma bezpośredniego sposobu na Stringify, a następnie deserializacji obiektu string do obiektu, który Cię interesuje. Ale jako obejście można zapisać ścieżki obrazów w pamięci lokalnej i załadować obrazy, pobierając adres URL dla obrazów. Zaletą byłoby to, że nigdy nie zabraknie miejsca na dysku i można tam przechowywać 1000 razy więcej plików.. Zapisanie obrazu lub innego pliku jako ciągu znaków w pamięci lokalnej nigdy nie jest mądrą decyzją..

Tworzenie obiektu o zasięgu globalnym

exp: var attmap = new Object();

Po zakończeniu wyboru pliku umieść pliki w zmiennej attmap jak poniżej,

attmap[file.name] = attachmentBody;
JSON.stringify(attmap)

Następnie możesz wysłać go do kontrolera poprzez wejście ukryte lub itp. i użyj go po deserializacji.

(Map<String, String>)JSON.deserialize(attachments, Map<String,String>.class);

Możesz tworzyć pliki z tymi wartościami w pętli for lub etc.

EncodingUtil.base64Decode(CurrentMapValue);

FYI: To rozwiązanie obejmie również wybór wielu plików