Stockage de l'image en HTML à partir d'un fichier d'entrée formulaire localement

Je me demandais si il est possible de stocker l'image à partir de

<input type="file" id="image">

localement. Aurais-je stocker l'image, ou pourrais-je simplement stocker l'emplacement de l'image?

Pour le contexte, c'est à partir d'un formulaire qui prend le nom, l'adresse, etc à partir de formulaires d'entrée de données, la création d'un objet, il les stocke dans un tableau et affiche le tableau.

Voulez-vous dire une norme de téléchargement de fichiers? Ou par "localement" voulez-vous dire sur le client? N'est-ce pas l'image déjà là?
L'image est sur le client et, si possible, que je pouvais tout simplement un lien vers le fichier, mais pour le bien de la forme est là un moyen plus simple que d'avoir une zone de texte de l'utilisateur, tapez le chemin de l'image? C'est pourquoi j'allais pour un upload de fichier en entrée, ou à essayer de toute façon.
Avez-vous regardé ceci: " stackoverflow.com/questions/5903323/... les Navigateurs traiter la valeur différente, de sorte que ma conjecture est votre stratégie ne marchera pas...

OriginalL'auteur Shuma | 2012-12-01

  1. 1

    Pas. Depuis le stockage d'un fichier ou d'accéder à un fichier local sur l'OS violerait les autorisations du navigateur. Si vos scripts ne peuvent pas accéder au contenu, sauf s'il a été téléchargé vers le serveur. Aussi différents navigateurs gérer le chemin d'accès du fichier qui a été sélectionné dans différentes manières. Si vous rencontrez un certain nombre de problèmes là-bas.

    Cela dit, il existe des moyens de contourner ce que je ne vais pas discuter. Tout simplement, l'image doit être téléchargé sur le serveur d'une certaine façon et puis vos scripts, vous pouvez référencer le chemin d'accès ou l'image elle-même de la voie qu'il a été transféré à.

    OriginalL'auteur Twisty

  2. 10

    Contrairement aux autres réponses ici, si vous utilisez un navigateur moderne, vous pouvez obtenir et stocker un peu plus sur le contenu d'un fichier <input> à l'aide de elm.files, FileReader et window.localStorage. Vous pouvez même dire au navigateur pour enregistrer de nouveau (téléchargement par défaut de comportement).

    Il convient de noter que le fait de ne pas signifie que vous pouvez définir le .value sur le <input> nœud.

    Voici un exemple de ce que vous pouvez faire, en supposant un fichier a été choisi.

    //From <input> node
var elm = document.getElementById('image'),
    img = elm.files[0],
    fileName = img.name, //not path
    fileSize = img.size; //bytes

//By Parsing File
var reader = new FileReader(),
    binary, base64;
reader.addEventListener('loadend', function () {
    binary = reader.result; //binary data (stored as string), unsafe for most actions
    base64 = btoa(binary); //base64 data, safer but takes up more memory
}, false);
reader.readAsBinaryString(img);

    À partir d'ici que vous pouvez enregistrer dans localStorage, créer dataURIs etc. Par exemple, Dire à partir de fileName nous savons que l'image est un .jpg, alors vous pouvez l'afficher en définissant un <img>'s src à "data:image/jpeg;base64," + base64.

    Noter que toute modification de ces données n'ont aucun effet sur le fichier d'origine choisi.

    OriginalL'auteur Paul S.

  3. 1

    Aucune façon. Mais si vous pouviez cela poserait de graves problèmes de sécurité.

    Si vous essayez d'obtenir la valeur de votre fichier d'entrée par exemple:

    document.getElementById('image').value

    la valeur doit être "C:\fakepath\somefile.txt"

    OriginalL'auteur ntadic

  4. 0

    Si vous voulez obtenir le nom de fichier, ou même afficher l'image, vous pouvez le faire en utilisant les Fichier API (sur les navigateurs qui le supportent). Le chemin d'accès n'est pas disponible pour des raisons de sécurité.

    OriginalL'auteur bfavaretto