web-dev-qa-db-fra.com

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

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?

html5image-processingupload
107
Hardik Sondagar

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

Voici un exemple rapide qui utilise la classe FileReader pour lire une image en tant que DataURL et restitue une vignette en définissant l'attribut src 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 en utilisant les API de fichiers en JavaScript .

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

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>
246
Kamyar Nazeri

Ici, je l’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 du fichier. ie un fichier image valide à traiter, puis vérifie si le navigateur prend en charge FileReader L'API 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 une image avant de la télécharger, jQuery, HTML5 FileReader () avec démonstration en direct

20
Satinder singh
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>
2
yogesh chatrola

Pour les images d’arrière-plan, veillez à utiliser url()

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