FileReader in JS implementiert die Bild-Upload-Vorschau

Dieses Mal bringe ich Ihnen eine Vorschau des Bild-Uploads mit FileReader in JS. Was sind die Vorsichtsmaßnahmen für die Implementierung der Bild-Upload-Vorschau mit FileReader in JS?

JavaScriptViele Leute sind verwirrt über die Verwendung von FileReader, um einen Bild-Upload-Vorschaueffekt zu erzielen. Der folgende Artikel Wir geben Ihnen die Details. Werfen wir einen Blick auf die spezifischen Betriebsmethoden und den Code.

FileReader ist Teil der HTML5-Datei-API. Es implementiert einen asynchronen Dateilesemechanismus. Sie können sich FileReader als XMLHttpRequest vorstellen. Der einzige Unterschied besteht darin, dass es das Dateisystem liest und nicht den Remote-Server. Um die Daten in der Datei zu lesen, stellt FileReader die folgenden Methoden zur Verfügung.

• readAsText(file,encoding): Lesen Sie die Datei im Klartext und speichern Sie die gelesene Datei im Ergebnisattribut.

• readAsDataURL(file): Lesen Sie die Datei und speichern Sie die Datei im Ergebnisattribut in Form eines Daten-URI.

• readAsBinaryString(file): Liest die Datei und speichert einen String im Ergebnisattribut. Jedes Zeichen im String repräsentiert ein Byte.

• readAsArrayBuffer(file): Liest die Datei und speichert einen ArrayBuffer mit dem Inhalt der Datei im Ergebnisattribut.

• Mehrfachattribut zeigt Unterstützung für mehrere Bilder an

<p id="wrapper">    
 <input id="fileUpload" type="file" multiple /><br />
 <p id="image-holder"> </p>
</p>

$("#fileUpload").on('change', function () {
 
  //获取上传文件的数量
  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") { 
      // 循环所有要上传的图片
      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("你的浏览器不支持FileReader！");
    }
  } else {
    alert("请选择图像文件。");
  }
});

FileReader unterstützt die Browser Internet Explorer 10+, Firefox, Chrome und Opera.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So implementieren Sie das Dekoratormuster in node.js

Detaillierte Schritte zur Verwendung mehrerer Django-Datenbanken

Das obige ist der detaillierte Inhalt vonFileReader in JS implementiert die Bild-Upload-Vorschau. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!