En HTML5, comment afficher un aperçu de l'image avant le téléchargement?

Question

Dans mon formulaire HTML, j'ai saisi une entrée avec un fichier type, par exemple:

  <input type="file" multiple>
 

Ensuite, je sélectionne plusieurs fichiers en cliquant sur ce bouton de saisie. Maintenant, je veux afficher un aperçu des images sélectionnées avant de soumettre le formulaire. Comment faire cela en HTML 5?

Answer 1

Vous pouvez utiliser FileReader class pour lire l'image en tant que DataURL et la lier à une balise d'image:

 var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);

oFReader.onload = function (oFREvent) {
    document.getElementById("uploadPreview").src = oFREvent.target.result;
};
 

Le code HTML pour le code ci-dessus:

 <img id="uploadPreview" style="width: 100px; height: 100px;" />
<input id="uploadImage" type="file" name="myPhoto" onchange="PreviewImage();" />
<script type="text/javascript">

    function PreviewImage() {
        var oFReader = new FileReader();
        oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);

        oFReader.onload = function (oFREvent) {
            document.getElementById("uploadPreview").src = oFREvent.target.result;
        };
    };

</script>
 

Answer 2

Cela peut être utile à tous ceux qui souhaitent le faire en Javascript et ce fil nous a aidé à le faire, donc nous avons pensé que nous aimerions partager.

Un de nos utilisateurs a juste demandé cette fonctionnalité à partir de nos jquery télécharger plusieurs fichiers du plugin: https://www.facebook.com/fyneworks/posts/10152493720999501

Nous l'avons construit et vous pouvez le voir en action ici: http://jsfiddle.net/fyneworks/2LLws/

<input type="file" class="multi with-preview" multiple />