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

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?

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:

function handleFileSelect(evt) {
    var files = evt.target.files;

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {

      // Only process image files.
      if (!f.type.match('image.*')) {
        continue;
      }

      var reader = new FileReader();

      // Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {
          // Render thumbnail.
          var span = document.createElement('span');
          span.innerHTML = 
          [
            '<img style="height: 75px; border: 1px solid #000; margin: 5px" src="', 
            e.target.result,
            '" title="', escape(theFile.name), 
            '"/>'
          ].join('');
          
          document.getElementById('list').insertBefore(span, null);
        };
      })(f);

      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);

<input type="file" id="files" multiple />
<output id="list"></output>

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

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

node.backgroundImage = 'url(' + e.target.result + ')';