Dieser Artikel stellt eine kurze Einführung in das verteilte Lesen von Dateien mit HTML5 FileReader und seine Methode vor und teilt sie mit allen. Die Einzelheiten lauten wie folgt:
Darstellungen
Die alte Regel besteht darin, zuerst die Renderings anzuzeigen.
Stellen Sie zunächst einige Methoden und Ereignisse von FileReader in H5 vor
FileReader-Methode
| Name | Wirkung |
|---|---|
| um() | Lesen beenden |
| readAsBinaryString(datei) | Datei als Binärkodierung lesen |
| readAsDataURL(Datei) | Datei als DataURL-codiert lesen |
| readAsText(Datei, [Kodierung]) | Datei als Text lesen |
| readAsArrayBuffer(file) | Datei in Arraybuffer einlesen |
FileReaderEvent
| Name | Wirkung |
|---|---|
| onloadstart | Wird ausgelöst, wenn der Lesevorgang beginnt |
| onprogress | Lektüre |
| onloadend | Wird durch den Abschluss des Lesevorgangs ausgelöst, unabhängig von Erfolg oder Misserfolg |
| laden | Wird ausgelöst, wenn das Lesen der Datei erfolgreich abgeschlossen wurde |
| onabort | Wird bei Interrupt ausgelöst |
| onerror | Wird bei Fehler ausgelöst |
Code
Die Kernidee des verteilten Lesens von Dateien besteht darin, die Datei in Blöcke zu unterteilen und sie alle M zu lesen.
HTML-Teil
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>Dokument</title></head><body> <form> <fieldset> <legend>Schritt für Schritt lesen Datei:</legend> <input type=file id=File> <input type=button value=interrupt id=Abort> <p> <lable>Read progress:</lable> <progress id=Progress value=0 max=100></progress> </p> </fieldset> </form> <script src=./loadFile.js></script> <script> var progress = document.getElementById('Progress' );//Fortschrittsbalken var events = { load: function () { console.log('loaded'); success: function () { console.log('success'); var loader; // Löst das onchange-Ereignis aus, nachdem die Datei zum Hochladen ausgewählt wurde file = this.files[0]; console.log(file) //loadFile.js loader = new FileLoader(file, events }; document.getElementById('Abort').onclick = function () { loader.abort(); } </script></body></html>Abschnitt „loadFile.js“.
/** Dateilesemodul* Dateidateiobjekt* Ereignisse Ereignisrückgabeobjekt enthält Erfolg, Ladevorgang, Fortschritt*/var FileLoader = function (file, events) { this.reader = new FileReader(); geladen = 0; this.total = file.size; //Jedes Mal 1M lesen this.step = 1024 * 1024 = events || //Lesen Sie den ersten Block this.readBlob(0); this.bindEvent(); }FileLoader.prototype = { bindEvent: function (events) { var _this = this, reader = this.reader; e ) { _this.onLoad(); }; reader.onprogress = function (e) { _this.onProgress(e.loaded); , Abbruch, Fehlerrückrufe werden vorerst nicht hinzugefügt}, // Das Fortschrittsereignis gibt onProgress zurück: function (loaded) { var percent, handler = this.events.progress;//Progress bar this.loaded += Loaded Percent = (this. geladen / this.total) * 100; handler && handler(percent }, //Ende des Lesevorgangs (wird am Ende jeder Leseausführung aufgerufen, nicht der Gesamtheit) onLoad: function () { var handler = this.events.load; // Die gelesenen Daten sollten hierher gesendet werden handler && handler(this.reader.result); // Wenn das Lesen nicht abgeschlossen ist, lesen Sie weiter if (this.loaded < this.total) { this.readBlob(this.loaded); } else { // Lesen abgeschlossen this.loaded = this.total // Wenn der Erfolg zurückkehrt, führen Sie this.events.success aus && this.events.success(); } }, // Den Dateiinhalt lesen readBlob: function (start) { var blob, file = this.file; // Wenn die Slice-Methode unterstützt wird, dann einlesen, wenn nicht, Once Read if (file.slice) { blob = file.slice(start, start + this.step } else { blob = file } this.reader.readAsText(blob); Lesevorgang abbrechen: function () { var reader = this.reader; if(reader) { reader.abort(} }}Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich sein wird. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.