Beispiele für die Verwendung der HTML5-Datei-API zum Lesen lokaler Dateien (wie Bilder, PDF usw.)

Wenn wir im Zeitalter von HTML4 das lokale Bild eines Benutzers auf einer Webseite präsentieren möchten, muss der Benutzer das Bild zuerst auf den Server hochladen und es dann entsprechend der vom Server bereitgestellten Bildadresse herunterladen, bevor das Bild verfügbar ist auf der Webseite angezeigt werden. Dieses Hin und Her hat mindestens das Doppelte des Datenverkehrs dieses Bildes gekostet, ganz zu schweigen von den Ressourcen, die der Server zum Speichern dieses Bildes aufwendet, und den ungerechtfertigten Kosten für das Hochladen des falschen Bildes durch den Benutzer (da Benutzer im HTML4-Zeitalter „Nach dem Hochladen“ wählen). Wenn Sie beispielsweise ein Bild hinzufügen, können Sie oft nur den Dateinamen des Bildes sehen, können aber durch die Vorschau nicht weiter bestätigen, ob es sich bei dem Bild um das Bild handelt, das Sie hochladen möchten.

HTML5 bietet eine neue Möglichkeit zum Abspielen, allein mit dem Browser können Sie lokale (tatsächlich können es auch Remote-)Dateien (hauptsächlich Bilder) rendern, lesen und verarbeiten, und das alles geschieht über die HTML5-Datei-API erreichen.

Die erste ist die Datenstruktur, die einen Dateiobjekttyp zur Darstellung von Dateien definiert, und jedes Dateiobjekt entspricht einer Datei. Das Dateiobjekt verfügt über drei Attribute: Name, Größe und Typ. Name ist der Dateiname ohne Pfad, Größe ist die Dateigröße in Bytes und Typ ist der MIME der Datei (z. B. image/jpg).

Das Dateiobjekt existiert nicht alleine, sondern in Form eines Arrays, in einem Array namens FileList. Wie erhält man also dieses FileList-Array? Derzeit gibt es in HTML5 zwei Möglichkeiten, FileList abzurufen: eine über die Eingabe des Dateityps und die andere über das Drop-Ereignis des Drag-and-Drop-Vorgangs.

Rufen Sie FileList durch Eingabe des Dateityps ab

 <Eingabe-ID=Datei-Eingabetyp=Datei />

Oder das neue multiple-Attribut in HTML5, das die Auswahl mehrerer Dateien ermöglicht:

 <input id=file-input type=file multiple />

Im Allgemeinen hängen wir ein onchange-Ereignis an input:file an, sodass nach der Auswahl der Datei durch den Benutzer sofort die nächsten Schritte wie das Lesen der Datei ausgeführt werden können:

 //Native jsvar inputElement = document.getElementById(file-input);inputElement.addEventListener(change, handleFiles, false);function handleFiles() { var fileList = this.files; }//jquery version$('#file-input ').on('change', function() { var fileList = this.files;});

Legen Sie zunächst einen Bereich für Drag & Drop fest:

 <div id=dropbox style=width: 200px;height: 200px;></div>

Um das Drop-Ereignis auszulösen, müssen wir außerdem das Standardverhalten der Dragenter- und Dragover-Ereignisse verhindern:

 var dropbox;dropbox = document.getElementById(dropbox);dropbox.addEventListener(dragenter, Dragenter, false);dropbox.addEventListener(Dragover, Dragover, False);dropbox.addEventListener(Drop, Drop, False);Function Dragenter(e) { e.stopPropagation(); e.preventDefault();}function dragover(e) { e.stopPropagation(); e.preventDefault();}

Dann können wir die Dateiliste im Rückruf des Drop-Ereignisses abrufen:

 function drop(e) { e.stopPropagation(); var dt = e.dataTransfer;}

HTML5 bietet zwei Lösungen: FileReader und ObjectUrl.

Zuerst müssen Sie das FileReader-Objekt instanziieren:

 var reader = new FileReader();

Die Verwendung von FileReader zum Lesen von Dateiobjekten ist ein asynchroner Prozess. Wir müssen zuerst den Rückruf des Ladeereignisses für FileReader festlegen, um FileReader mitzuteilen, welche weiteren Vorgänge es nach dem Lesen der Daten des Dateiobjekts ausführen soll:

 reader.onload = function(e) { document.getElementById(image).src = e.target.result }

Die Bedeutung des obigen Codes besteht darin, dass FileReader, nachdem er die Bilddaten gelesen hat, die Daten (DataUrl) in das src-Attribut einfügt.

Schließlich werden die verschiedenen Methoden von FileReader verwendet, um zu entscheiden, welches Datenformat zum Speichern der Dateiobjektdaten nach dem Lesen verwendet werden soll, und um das Lesen zu implementieren:

1. readAsArrayBuffer(file): Liest das Dateiobjekt und speichert es als ArrayBuffer-Objekt (ich habe noch nicht herausgefunden, was das ArrayBuffer-Objekt ist, es sollte eine Datenstruktur sein, die für einen effizienten Datenzugriff generiert wird).
2. readAsText(file [, 'UTF-8']): Lesen Sie das Dateiobjekt im allgemeinen Textmodus. Beachten Sie, dass der zweite Parameter (optional) zur Angabe der Zeichenkodierung verwendet werden kann.
3. readAsDataURL(file): Liest das Dateiobjekt und speichert es als String im data: URL-Format.

ObjectURL entspricht einem temporären Pfad zur Datei. Dieser temporäre Pfad kann jederzeit generiert und freigegeben werden. Bei Verwendung im lokalen Browser unterscheidet er sich nicht von einer gewöhnlichen URL.

Nehmen Sie als Beispiel die Anzeige eines lokalen Bildes auf der Seite:

 var img = document.createElement(img);img.src = window.URL.createObjectURL(file);

Zu diesem Zeitpunkt sieht src wie folgt aus: blob:http://test.local.com/e03e8bbf-66ce-4fea-a8c8-772f9fdb4d40

Durch die Verwendung dieser Quelle kann der Browser Bilder lokal lesen.

Im Vergleich zur Verwendung von FileReader zum Generieren der Base64-Codierung des Bildes und zum Einfügen in den Quellcode wurde die Leistung dieser Lösung erheblich verbessert.

Beim Vergleich dieser beiden Lösungen zum Lesen von Dateiobjekten eignet sich FileReader zum Hochladen von Dateien, während sich ObjectURL für den direkten Betrieb im Browser und das Hochladen der verarbeiteten Daten nach dem Vorgang eignet, z. B. zum Erstellen von Screenshots oder zum Durchführen einer Bildkomprimierung usw. mithilfe von Canvas . . Dies hängt natürlich alles von der Kompatibilität ab.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.