Javascript-HTML5-Datei-Upload FileReader API_Javascript-Tipps

Die Funktion zum Hochladen von Dateien wird mittlerweile immer häufiger verwendet. Alle sozialen Netzwerke und Medienseiten wie Youku Video, Weibo usw. bieten Funktionen wie das Hochladen von Bildern und Videos. Aber in der Vergangenheit wussten WEB-Programmierer, dass das Hochladen von Dateien mithilfe von HTML-Formularen sehr mühsam war. Insbesondere wenn Sie einige Attribute der vom Benutzer hochgeladenen Dateien wissen möchten, müssen Sie warten, bis der Upload abgeschlossen ist.

Das Hochladen unbekannter Dinge auf den Server kann zu Sicherheitsproblemen führen oder zu groß sein, die zulässige Größe überschreiten und Speicherplatz verschwenden. Nun gut, die WEB-Technologie verbessert sich und HTML5 hat viele gute Dinge gebracht. Mit dieser FileReader-API können Sie einige grundlegende Eigenschaften der hochgeladenen Datei abrufen, bevor der Benutzer sie hochlädt.

HTML-Code

Diese FileReader-API funktioniert genauso wie die File-API und erfordert die Verwendung von input[type="file"]-Elementen:

<-- 一个能上传多媒体文件的表单 -->
<input type="file" id="upload-file" multiple />

<-- 显示图片的地方 -->
<div id="destination"></div>

Im Datei-API-Artikel finden Sie detaillierte Informationen zu den Dateien, die gelesen werden können, z. B. Adresse, Volumen, Größe, Dateityp usw.

JavaScript

In diesem Beispiel verwenden wir das Eingabeformularfeld, um ein Bild hochzuladen. Wenn der Benutzer ein Bild auf seinem Computer auswählt, wird das Bild auf der Seite angezeigt:

document.getElementById('upload-file').addEventListener('change', function() {
 var file;
 var destination = document.getElementById('destination');
 destination.innerHTML = '';

 // 循环用户多选的文件
 for(var x = 0, xlen = this.files.length; x < xlen; x++) {
 file = this.files[x];
 if(file.type.indexOf('image') != -1) { // 非常简单的交验

  var reader = new FileReader();

  reader.onload = function(e) {
  var img = new Image();
  img.src = e.target.result; // 显示图片的地方

  destination.appendChild(img);
  };
  
  reader.readAsDataURL(file);
 }
 }
});

In diesem Beispiel verwenden wir die Methode readAsDataURL in FileReader, um den Bildinhalt in eine Base64-codierte Zeichenfolge umzuwandeln und ihn dann mithilfe der Daten-URI des Bildes anzuzeigen. Andere FileReader-Lesemethoden umfassen readAsText, readAsArrayBuffer und readAsBinaryString usw.

Mit dieser FileReader-API können wir vermeiden, dass Benutzer Dateien zuerst auf den Server hochladen, und wir können sie auf dem Browser-Client ausführen. Diese Vorverarbeitung ist vor dem Hochladen auf den Server erforderlich.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.