Einführung in die Funktion von JavaScript mit FileReader zum Vervollständigen des Hochladens und der Vorschau von Bildern

In diesem Artikel wird hauptsächlich die Verwendung von FileReader zum Erzielen eines Vorschaueffekts für Bilder vorgestellt. Interessierte Freunde können sich darauf beziehen.

FileReader ist Teil der HTML5-Datei-API. Es implementiert einen asynchronen Dateilesemechanismus. Sie können sich FileReader als XMLHttpRequest vorstellen, mit der Ausnahme, dass es das Dateisystem und nicht den Remote-Server liest. Um die Daten in der Datei auszulesen, 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 eine Zeichenfolge im Ergebnisattribut. Jedes Zeichen in der Zeichenfolge repräsentiert ein Byte.

• readAsArrayBuffer(file): Liest die Datei und speichert einen ArrayBuffer, der den Dateiinhalt im Ergebnisattribut enthält.

• Das Mehrfachattribut gibt die 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.

Das obige ist der detaillierte Inhalt vonEinführung in die Funktion von JavaScript mit FileReader zum Vervollständigen des Hochladens und der Vorschau von Bildern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!