Comment faire pour sauvegarder et restaurer un Fichier objet dans le stockage local

J'ai un HTML5/javascript application qui utilise 

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

pour capturer une image de la caméra. Parce que mon application se veut être praticable hors ligne, comment puis-je enregistrer le Fichier (https://developer.mozilla.org/en-US/docs/Web/API/File) de l'objet dans le local de stockage, tel qu'il peut être récupéré plus tard pour un ajax upload?

Je passe le fichier de l'objet de l'aide ...

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

Je peux Stringify l'objet et de l'enregistrer, mais quand je le restaurer, il n'est plus reconnu comme un Fichier objet, et ne peut donc pas être utilisés pour récupérer le contenu du fichier.

J'ai un sentiment qu'il ne peut pas être fait, mais je suis ouvert aux suggestions.

FWIW Ma solution est de lire le contenu du fichier à stocker du temps et économiser de l'intégralité du contenu pour le stockage local. Cela fonctionne, mais consomme rapidement local de stockage étant donné que chaque fichier est de 1 mo de plus photographie.

  • Depuis local de stockage prend en charge uniquement les chaînes, vous devrez convertir le fichier en base 64 (ou une certaine forme de chaîne de caractères)
  • Par exemple: developer.mozilla.org/en-US/docs/Web/API/...
  • Je suppose que c'est ce que Lawnchair est en train de faire pour moi. Le problème est que le fichier objet contient un tas de prototypes de méthodes qui ne peuvent pas être sérialisés. Je suppose que j'ai besoin de choisir le fichier objet à part, et de l'extrait de ses propriétés, ... mais c'est une supposition et je ne sais pas quelle est la cohérence de l'objet fichier est sur tous les navigateurs.
  • viens de voir le lien. Je ne suis pas en train d'enregistrer le fichier de contenu des médias, puisque c'est déjà sauvé. Je suis juste en train d'enregistrer le fichier d'objet qui fait référence au contenu multimédia enregistré. c'est à dire. Je veux enregistrer ce developer.mozilla.org/en-US/docs/Web/API/File
  • Votre seule option est de stocker les données d'image dans le localStorage. Je me demande aussi pourquoi vous voulez permettre à votre application pour stocker des références à des images. S'ils sont destinés à être téléchargés il suffit de télécharger lorsque vous êtes en ligne. Que pouvez-vous faire hors de toute façon?
  • Je pense que vous êtes en droit de re le stockage de la totalité de l'image. La raison pour laquelle je suis en train d'enregistrer le Fichier objet est de sorte qu'il est maintenu à travers le navigateur/la page est rechargée. Votre suggestion pour télécharger en ligne" ne fonctionne que tant que la page reste chargé dans le navigateur.
  • Ma suggestion est d'ajouter la dataURL à votre fichier objet et stringify après. Donc, vous devez avoir le fichier complet de l'objet et vous pouvez charger l'image avec le dataURL stockées. jsfiddle.net/bR8Nt/1
  • C'est à peu près ce que je fais comme une solution de contournement. Comme je l'ai dit dans la question, je suis à la recherche d'un mécanisme permettant d'enregistrer une poignée pour le fichier dans la galerie (ie. le Fichier d'origine de l'objet), donc je n'en finissent pas de stocker le contenu des médias à deux reprises et le remplissage de stockage local.
  • Depuis il n'y a littéralement aucun moyen pour instancier un File objet en JavaScript vous êtes assez bien hors de la chance. Le plus proche de l'alternative consisterait, lors de la restauration de la chaîne de fichier encodé à partir d'un stockage local, pour créer un Blob, qui File hérite. Vous pouvez utiliser un Blob pour la majorité des choses que vous feriez autrement un File pour. Si vous pensez qu'un exemple de ceci serait utile, je vais l'écrire. Il n'a pas vraiment de résoudre votre problème, vous permet de vous rapprocher un peu plus de la nature de l'objet que vous semblez réellement.
  • thx pour confirmer le problème. Ma seule raison de vouloir restaurer le Fichier objet est dans la mesure où il agit comme une référence à une photo dans la galerie, évitant ainsi la nécessité de faire une deuxième copie dans le localstorage.
  • l'utilisation de l'URL.createObjectURL à son tour un objet blob dans une url pour nourrir img.src ou ajax par exemple. l'utilisation de la nouvelle Goutte([str]) pour transformer une chaîne de caractères dans un blob.
  • merci, mais comme avec toutes les réponses, cela m'oblige d'enregistrer une copie du contenu de l'image. J'essayais simplement d'enregistrer le Fichier d'objet comme un pointeur vers le .le fichier jpg dans mon téléphone de la galerie.
  • Je crois que j'ai trouvé une réponse possible, mais il est spécifique à Vue/Vuex et pas de stockage local directement. Qui ne devrait pas d'importance, comme Vuex juste enveloppements local de stockage, mais ce n'est pas assez bon comme une réponse complète. De toute façon: Regardez golb.hplar.ch/2017/02/..., spécifiquement github.com/ralscha/blog/blob/master/uploadsb/client/src/app/... . Dans mon application, je suis sauver le formData variable Vuex (Vue chose d'emballage localstorage), et je suis en mesure de le récupérer plus tard et de le transférer avec succès à un serveur.

InformationsquelleAutor pinoyyid | 2013-10-01
  1. 9

    Vous ne pouvez pas sérialiser fichier objet d'API.

    Pas ce qu'il contribue au problème spécifique, mais ...
    Bien que je n'ai pas l'habitude de cela, si vous regardez ici il semble qu'il existe des moyens (bien que pas encore pris en charge par la plupart des navigateurs) pour stocker l'image en mode hors connexion de données à certains fichiers afin de les restaurer par la suite lorsque l'utilisateur est en ligne (et de ne pas utiliser localstorage)

    • Merci pour le lien. Une fois le système de fichiers de l'API est mieux pris en charge, il pourrait fournir une meilleure alternative que indexeddb. De toute façon, je me retrouve avec une deuxième copie de l'image (à l'origine, dans la galerie et une copie que j'ai enregistré quelque part), qui est ce que j'essaie d'éviter. Mais, malheureusement, je pense que "Vous ne pouvez pas sérialiser fichier objet d'API" est la bonne réponse.
    • Bien que je suppose que vous l'enregistrez dans un javascript blob, j'ai le sentiment que l'utilisation cachée de la toile, des objets peuvent aider aussi, où on pourrait dessiner les données de l'image et lorsque vous êtes en ligne obtenir les données d'image à partir d'une toile.les données. Je suppose que cette toile pourrait être dans un iframe? Qui pourrait persister aussi longtemps que cela est nécessaire (afin de ne pas avoir de problèmes avec localstorage). Mais encore une fois, tant que vous avez en javascript, pourquoi voudriez-vous avoir dans un canvas trop?
    • Le problème est page/navigateur recharge. Si l'utilisateur décharge la page je perds tout ce qui a été stockée dans la mémoire.
    • Oui, je comprends, c'est pourquoi vous essayez de stocker définitivement ailleurs. Encore une chose que je peut dire c'est qu'afin d'avoir plus d'espace vous pouvez consommer tout l'espace disponible du navigateur dans la séquence. Ce que je veux dire, c'est que vous pouvez par exemple utiliser localstorage, de stockage flash, google gears, c'est à dire userdata etc dans la séquence (comme Persistjs n'mais en parallèle), mais cela demanderait beaucoup de codage. De toute façon, j'espère que vous trouverez une réponse.
    • J'ai accepté cette réponse, car il semble que la sauvegarde/restauration d'un Fichier objet n'est pas possible. Triste mais vrai.
    • il n'est pas possible en raison de l'évidence des risques de sécurité. si vous avez été autorisé à conserver un Fichier objet comme une chaîne de caractères dans le local de stockage vous serait également en mesure de modifier la chaîne de l'accès aux autres fichiers dans le même répertoire sans que l'utilisateur le sache.

    InformationsquelleAutor George Mavritsakis
  2. 11

    Voici une solution de contournement que j'ai eu à travailler avec le code ci-dessous. Je suis conscient avec votre montage vous avez parlé de localStorage, mais je voulais partager ce que j'ai réellement mis en œuvre cette solution de contournement. Je tiens à mettre les fonctions dans le corps de sorte que même si la classe est ajouté par la suite via AJAX le "changement" commande va encore déclencher l'événement.

    Voir mon exemple ici: http://jsfiddle.net/x11joex11/9g8NN/

    Si vous exécutez le JSFiddle exemple deux fois, vous verrez, il se souvient de l'image.

    Mon approche n'utiliser jQuery. Cette approche démontre également l'image est en fait là pour le prouver, il a travaillé.

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

    Cette approche utilise le HTML5 Système de Fichiers de l'API de lecture de l'image et de la mettre dans un nouveau javascript img objet. La clé ici est readAsDataURL. Si vous utilisez google chrome inspecteur, vous remarquerez que les images sont stockées dans le codage base64.

    Le lecteur est Asynchrone, c'est pourquoi il utilise la fonction de rappel onload. Donc, assurez-vous que tout le code important qui exige que l'image est à l'intérieur de la onLoad ou d'autre, vous pouvez obtenir des résultats inattendus.

    • Merci pour l'affichage de la solution de contournement qui je suis sûr va aider les gens. J'espère que c'est OK que j'ai édité votre réponse à souligner qu'il est une solution de contournement, et non pas la réponse à la question. Je cherchais un moyen pour enregistrer le Fichier d'objet sans faire une deuxième copie des données d'image.
    • Ouais j'ai été à la recherche de ce que vous recherchez, aussi, je voudrais que ce soit fait, j'ai mis une prime pour voir si quelqu'un pouvait le comprendre.
    • Comment est-ce une solution? Quel est le problème avec elle?
    • Particulier, j'ai été à la recherche pour conserver le Fichier objet, pas le fichier contenu. Mon application est de ciblage mobile, de sorte que l'image a déjà été enregistré dans la galerie. Je voulais stocker une référence à l'image de la galerie, plutôt que de faire une deuxième copie à l'aide de localstorage, avec toutes les limitations de taille qui vont avec.
    • Alors peut-être vous voulez juste le nom du fichier, au lieu de la totalité du Fichier de l'objet?
    • Pas de. Je veux que l'ensemble du Fichier objet
    • si j'utilise le code ci-dessus pour un multi-page de formulaire (pour stocker localement une image pendant que l'utilisateur va ensuite à remplir le reste de la page du formulaire(s)) est-il possible d'appeler ou obtenir le téléchargement de la img à la fin de la forme et de les télécharger pour AJAX?
    • Ouais, vous devriez être en mesure de, l'image est simplement stockés dans un texte comme le format que vous devriez être en mesure de pousser vers le haut. Je peux créer un échantillon plus tard si vous avez besoin de l'aide de qui, peut-être pour une autre question est de vous en créer un sur ici.

    InformationsquelleAutor Joseph Astrahan
  3. 5

    Convertir en base64 et de l'enregistrer.

    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
    • thx, mais s'il vous plaît lisez la question à nouveau. Je ne veux pas enregistrer le contenu du fichier, je veux enregistrer le Fichier objet.
    InformationsquelleAutor The helpful coding genius
  4. 1

    Vous pouvez utiliser cette lib:

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

    puis faire quelque chose de similaire à ceci: 

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

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

    une autre solution serait d'utiliser json (je préfère cette méthode)
    aide: http://code.google.com/p/jquery-json/

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

//get file
var outFile = $.evalJSON(window.localStorage.getItem("file"));
    • Merci, mais vous avez raté le point de la question. Je ne suis pas demandant comment puis-je enregistrer un arbitraire, objet générique. Je me demande comment faire pour enregistrer un Fichier objet tel que, lors de la restauration il est utilisable comme un objet de Fichier.
    • Ah! Mauvaise lecture de ma part. Désolé.
    InformationsquelleAutor Philip G
  5. 1

    Je ne pense pas qu'il y est un moyen direct pour Stringify et puis désérialiser la chaîne de l'objet dans l'objet de votre intérêt. Mais comme un travail, vous pouvez stocker les chemins de l'image dans votre local de stockage et de charger les images en récupérant l'URL pour les images. Avantages seraient, vous ne manquerez jamais d'espace de stockage et vous pouvez stocker 1000 fois plus de fichiers il y a.. l'Enregistrement d'une image ou tout autre fichier comme une chaîne de caractères dans le local de stockage n'est jamais une sage décision..

    • "vous pouvez stocker les chemins de l'image dans votre local de stockage et de charger les images en récupérant l'URL pour les images" . Non, vous ne pouvez pas
    • Vous pouvez.. Vous pouvez stocker le chemin d'accès de l'image, puis le charger depuis le local de stockage? Ce qui fait que vous pensez que vous ne pouvez pas? Gardez une clé comme un alias et de stocker l'url du fichier image, comme la valeur.. je l'ai fait dans mon projet..
    • Le Javascript modèle de sécurité n'autorise pas la lecture de fichiers à partir du disque local.
    InformationsquelleAutor Jashobanta Chakraborty
  6. 0

    créer un objet sur la portée globale 

    exp: var attmap = new Object();

    après vous avez terminé avec la sélection de fichier, placer vos fichiers dans attmap variable comme ci-dessous,

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

    Ensuite, vous pouvez l'envoyer au contrôleur via l'entrée cachée ou etc. et les utiliser après la désérialisation.

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

    Vous pouvez créer vos fichiers avec ces valeurs dans une boucle for ou etc.

    EncodingUtil.base64Decode(CurrentMapValue);

    Pour info:Cette solution permettra également de couvrir plusieurs de sélection de fichier

    InformationsquelleAutor umithuckan
  7. 0

    Vous pourriez faire quelque chose comme ceci:

    //fileObj = new File(); from file input
const buffer = Buffer.from(await new Response(fileObj).arrayBuffer());
const dataUrl = `data:${fileObj.type};base64,${buffer.toString("base64")}`;

localStorage.setItem('dataUrl', dataUrl);

    alors vous pouvez faire: 

    document.getElementById('image').src = localStorage.getItem('dataUrl');
    • c'est de stocker le contenu du fichier. Je cherchais un moyen de stocker le Fichier objet.
    InformationsquelleAutor Dryden Williams