Zeigen Sie vor dem Hochladen eine Bildvorschau an

In meinem HTML-Formular habe ich Eingaben mit Typdatei abgelegt, zum Beispiel:

 <input type="file" multiple>

Dann wähle ich mehrere Dateien aus, indem ich auf diese Eingabeschaltfläche klicke. Jetzt möchte ich eine Vorschau ausgewählter Bilder anzeigen, bevor ich das Formular abschicke. Wie geht das in HTML 5?

HTML5 wird mit der Datei-API-Spezifikation geliefert , mit der Sie Anwendungen erstellen können, mit denen der Benutzer lokal mit Dateien interagieren kann. Das heißt, Sie können Dateien laden und im Browser rendern, ohne die Dateien tatsächlich hochladen zu müssen. Teil der Datei-API ist die FileReader- Oberfläche, mit der Webanwendungen den Inhalt von Dateien asynchron lesen können.

Hier ist ein kurzes Beispiel, das die FileReaderKlasse verwendet, um ein Bild als DataURL zu lesen und eine Miniaturansicht zu rendern, indem das srcAttribut eines Bild-Tags auf eine Daten-URL gesetzt wird:

Der HTML-Code:

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

Der JavaScript-Code:

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]);
};

Hier ist ein guter Artikel zur Verwendung der Datei-APIs in JavaScript .

Das Code-Snippet im folgenden HTML-Beispiel filtert Bilder aus der Auswahl des Benutzers heraus und rendert ausgewählte Dateien in mehrere Miniaturansichten:

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>

Hier habe ich mit jQuery die FileReader API verwendet.

HTML-Markup:

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

jQuery:

Hier im jQuery-Code überprüfe ich zuerst die Dateierweiterung. dh eine gültige Bilddatei , die verarbeitet werden soll, prüft dann, ob der Browser die FileReader- API unterstützt. Ja, dann wird nur verarbeitet, andernfalls wird die entsprechende Meldung angezeigt

$("#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");
     }
 });

Ausführlicher Artikel: Vorschau des Bildes vor dem Hochladen, jQuery, HTML5 FileReader () mit Live-Demo

Stellen Sie für Hintergrundbilder sicher, dass Sie verwenden url()

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