html5 vergrößern - Zeigen Sie vor dem Hochladen eine Bildvorschau an




windows 10 (4)

In meinem HTML-Formular habe ich Eingabefeld mit Typ-Datei zum Beispiel:

 <input type="file" multiple>

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


Answers

Hier habe ich mit jQuery mit FileReader API gemacht.

HTML-Markup:

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

jQuery:

Hier im jQuery-Code suche ich zuerst nach der Dateierweiterung. dh gültige Bilddatei , die verarbeitet werden soll, dann wird überprüft, ob der Browser die FileReader- API unterstützt, ja dann nur die sonst bearbeitete Nachricht verarbeitet wird

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

Detaillierter Artikel: Vorschau des Bildes vor dem Hochladen, jQuery, HTML5 FileReader () mit Live Demo


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>


HTML5 verfügt über eine Datei-API-Spezifikation , mit der Sie Anwendungen erstellen können, mit denen der Benutzer lokal mit Dateien interagieren kann. Das bedeutet, dass Sie Dateien laden und im Browser rendern können, ohne die Dateien hochladen zu müssen. Ein Teil der File-API ist die FileReader Schnittstelle, mit der Webanwendungen den Inhalt von Dateien asynchron lesen können.

Hier ist ein kurzes Beispiel, das die FileReader Klasse verwendet, um ein Bild als DataURL zu lesen und ein Thumbnail zu rendern, indem das src Attribut eines Image-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 Vorschaubilder:

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 ist ein Apple-Entwickler-Link, der ausdrücklich besagt, dass

Bei iPhone und iPod touch, bei denen es sich um kleine Bildschirme handelt, wird "Video NICHT innerhalb der Webseite angezeigt"

Safari-Gerät-spezifische Überlegungen

JETZT :

  • Das Attribut webkit-playsinline funktioniert für HTML5-Videos unter iOS, aber nur, wenn Sie die Webseite als Webanwendung auf Ihrem Startbildschirm speichern. Nicht, wenn Sie eine Seite in Safari öffnen
  • Für eine native App mit einem WebView (oder einer Hybrid-App mit HTML, CSS, JS) ermöglicht das UIWebView die Wiedergabe des Videos inline, jedoch nur, wenn Sie die Eigenschaft allowsInlineMediaPlayback für die Klasse UIWebView auf true setzen






html5 image-processing upload