JavaScript verwendet FileReader, um einen Vorschaueffekt beim Hochladen von Bildern zu erzielen

Dieser Artikel stellt hauptsächlich JavaScript vor, um den Bild-Upload-Vorschaueffekt zu erzielen. Freunde, die sich für JavaScript interessieren, können sich auf diesen Artikel beziehen >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

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("请选择图像文件。");
  }
});

Für Schüler, die mit dem Hochladen von JavaScript nicht vertraut sind, kann dieser Artikel zum Erlernen des Hochladens von JavaScript verwendet werden! !

Verwandte Empfehlungen:

Das obige ist der detaillierte Inhalt vonJavaScript verwendet FileReader, um einen Vorschaueffekt beim Hochladen von Bildern zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!