Afficher un aperçu de l'image avant le téléchargement


116

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

 <input type="file" multiple>

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



Réponses:


264

HTML5 est livré avec la spécification File API , qui vous permet de créer des applications qui permettent à l'utilisateur d'interagir avec les fichiers localement; Cela signifie que vous pouvez charger des fichiers et les rendre dans le navigateur sans avoir à télécharger les fichiers. L' interface FileReader fait partie de l'API File , qui permet aux applications Web de lire de manière asynchrone le contenu des fichiers.

Voici un exemple rapide qui utilise la FileReaderclasse pour lire une image en tant que DataURL et restitue une miniature en définissant l' srcattribut d'une balise d'image sur une URL de données:

Le code html:

<input type="file" id="files" />
<img id="image" />

Le code JavaScript:

document.getElementById("files").onchange = function () {
    var reader = new FileReader();

    reader.onload = function (e) {
        // get loaded data and render thumbnail.
        document.getElementById("image").src = e.target.result;
    };

    // read the image file as a data URL.
    reader.readAsDataURL(this.files[0]);
};

Voici un bon article sur l' utilisation des API de fichiers en JavaScript .

L'extrait de code de l'exemple HTML ci-dessous filtre les images de la sélection de l'utilisateur et rend les fichiers sélectionnés en plusieurs aperçus miniatures:


2
Maintenant, comment annuler certaines images pour le téléchargement, puis soumettre le formulaire? Cela me sera vraiment utile.
Hardik Sondagar

Mais je veux savoir comment supprimer un fichier particulier pour l'empêcher de se télécharger. C'est défini dans une structure.
Hardik Sondagar

4
Désactivez simplement l'élément d'entrée de fichier, et il ne sera pas téléchargé! Donc dans l'exemple ci-dessus:document.getElementById("uploadImage").disabled = true
Kamyar Nazeri

@KamyarNazeri Si FileReader n'est pas disponible, qu'en est-il?
MichaelLuthor

1
@Nicholas L'extrait de code sous "Afficher la section de l'extrait" vous permet en fait de charger plusieurs images et de les prévisualiser toutes
Kamyar Nazeri

20

Ici, j'ai fait avec jQuery en utilisant l'API FileReader.

Balisage Html:

<input id="fileUpload" type="file" multiple />
<div id="image-holder"></div>

jQuery:

Ici, dans le code jQuery, je vérifie d'abord l'extension de fichier. c'est-à-dire un fichier image valide à traiter, puis vérifiera si l' API FileReader de prise en charge du navigateur est oui alors seulement traité sinon afficher le message respecté

$("#fileUpload").on('change', function () {

     //Get count of selected files
     var countFiles = $(this)[0].files.length;

     var imgPath = $(this)[0].value;
     var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
     var image_holder = $("#image-holder");
     image_holder.empty();

     if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
         if (typeof (FileReader) != "undefined") {

             //loop for each file selected for uploaded.
             for (var i = 0; i < countFiles; i++) {

                 var reader = new FileReader();
                 reader.onload = function (e) {
                     $("<img />", {
                         "src": e.target.result,
                             "class": "thumb-image"
                     }).appendTo(image_holder);
                 }

                 image_holder.show();
                 reader.readAsDataURL($(this)[0].files[i]);
             }

         } else {
             alert("This browser does not support FileReader.");
         }
     } else {
         alert("Pls select only images");
     }
 });

Article détaillé: Comment prévisualiser l'image avant de la télécharger, jQuery, HTML5 FileReader () avec démo en direct


1
isnt considèrent mauvaise pratique si vous declear vardans for loop? à chaque for loopitération, une nouvelle variable readersera déclear.
Phoenix

L'ajout d'un accept="image/*"attribut à <input> peut aider à empêcher la sélection de types de fichiers non image.
Août

Comment puis-je afficher les noms des images avec l'aperçu de l'image?
Naveenbos le

4


1

Pour les images d'arrière-plan, assurez-vous d'utiliser url()

node.backgroundImage = 'url(' + e.target.result + ')';
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.