Come faccio a salvare e ripristinare un object File nella memoria locale

Ho un’app HTML5 / javscript che usa

 

per catturare un’immagine della telecamera. Poiché la mia app vuole essere eseguibile offline, come faccio a salvare l’object File ( https://developer.mozilla.org/en-US/docs/Web/API/File ) nell’archivio locale, in modo che possa essere recuperato in seguito per un caricamento Ajax?

Sto afferrando l’object file dall’uso …

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

Posso stringificare l’object e salvarlo, ma quando lo ripristino, non è più riconosciuto come object File e quindi non può essere utilizzato per afferrare il contenuto del file.

Ho la sensazione che non possa essere fatto, ma sono aperto ai suggerimenti.

fww Il mio lavoro è di leggere il contenuto del file in fase di archiviazione e salvare l’intero contenuto nella memoria locale. Funziona, ma consuma rapidamente memoria locale dato che ogni file è una foto più 1 MB.

Non è ansible serializzare l’object API file.

Non che questo aiuti con il problema specifico, ma … Anche se non l’ho usato, se guardi qui sembra che ci siano modi (anche se non ancora supportati dalla maggior parte dei browser) per memorizzare i dati dell’immagine offline in alcuni file come per ripristinarli in seguito quando l’utente è online (e non per usare lo store locale)

Ecco una soluzione che ho lavorato con il codice qui sotto. Sono a conoscenza del tuo editing hai parlato di localStorage ma volevo condividere il modo in cui ho implementato questa soluzione alternativa. Mi piace mettere le funzioni sul corpo in modo che anche se la class viene aggiunta in seguito tramite AJAX, il comando “cambia” attiverà comunque l’evento.

Vedi il mio esempio qui: http://jsfiddle.net/x11joex11/9g8NN/

Se esegui due volte l’esempio JSFiddle, vedrai che ricorda l’immagine.

Il mio approccio usa jQuery. Questo approccio dimostra anche che l’immagine è effettivamente lì per dimostrare che ha funzionato.

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

Questo approccio utilizza le API del file system HTML5 per leggere l’immagine e inserirla in un nuovo object img javascript. La chiave qui è readAsDataURL. Se usi l’ispettore chrome noterai che le immagini sono memorizzate nella codifica base64.

Il lettore è asincrono , questo è il motivo per cui utilizza l’onload della funzione di callback. Quindi assicurati che qualsiasi codice importante che richiede l’immagine sia all’interno di onLoad, altrimenti potresti ottenere risultati imprevisti.

Convertirlo in base64 e quindi salvarlo.

 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 

Puoi usare questa lib:

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

quindi fare qualcosa di simile a questo:

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

un’altra soluzione potrebbe usare JSON (preferisco questo metodo) usando: http://code.google.com/p/jquery-json/

 //Set file window.localStorage.setItem("file",$.toJSON(fileobject)); //get file var outFile = $.evalJSON(window.localStorage.getItem("file")); 

Non penso che ci sia un modo diretto per stringificare e quindi deserializzare l’object stringa nell’object di tuo interesse. Ma come soluzione puoi archiviare i percorsi delle immagini nella tua memoria locale e caricare le immagini recuperando l’URL per le immagini. I vantaggi sarebbero: non si esaurirà mai lo spazio di archiviazione ed è ansible memorizzare 1000 volte più file. Salvare un’immagine o qualsiasi altro file come stringa nella memoria locale non è mai una decisione saggia ..

creare un object sull’ambito globale

 exp: var attmap = new Object(); 

dopo aver terminato la selezione dei file, inserisci i tuoi file nella variabile attmap come sotto,

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

Quindi è ansible inviarlo al controller tramite input nascosto o ecc. E usarlo dopo la deserializzazione.

 (Map)JSON.deserialize(attachments, Map.class); 

Puoi creare i tuoi file con quei valori in un ciclo for o ecc.

 EncodingUtil.base64Decode(CurrentMapValue); 

Cordiali saluti: questa soluzione coprirà anche la selezione di più file