Dieses Mal werde ich Ihnen zeigen, wie Sie die FileReader-Distribution von H5 zum Lesen von Dateien verwenden und welche Vorsichtsmaßnahmen Sie für die Verwendung der FileReader-Distribution zum Lesen von Dateien treffen. Hier sind praktische Beispiele Schauen Sie mal rein.
Stellen Sie zunächst einige Methoden und Ereignisse von FileReader in H5 vor
FileReader-Methode
Namensfunktion
about() Lesevorgang beenden
readAsBinaryString(file) Die Datei als Binärkodierung lesen
readAsDataURL(file) Die Datei als DataURL-Kodierung lesen
readAsText(file , [encoding] ) Lesen Sie die Datei als Text
readAsArrayBuffer(file) Lesen Sie die Datei als Arraybuffer
FileReader-Ereignis
Name
Funktion
onloadstart Wird ausgelöst, wenn der Lesevorgang beginnt
onprogress Lesevorgang läuft
onloadend Wird ausgelöst, wenn der Lesevorgang abgeschlossen ist, unabhängig von Erfolg oder Misserfolg
onload Wird ausgelöst, wenn das Lesen der Datei erfolgreich abgeschlossen wurde
onabort Wird ausgelöst, wenn es unterbrochen wird. Die Kernidee besteht darin, die Datei in Blöcke zu unterteilen und jeden M.
HTML-Teil
zu lesen loadFile.js-Teil<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <form> <fieldset> <legend>分步读取文件:</legend> <input type="file" id="File"> <input type="button" value="中断" id="Abort"> <p> <lable>读取进度:</lable> <progress id="Progress" value="0" max="100"></progress> </p> </fieldset> </form> <script src="./loadFile.js"></script> <script> var progress = document.getElementById('Progress');//进度条 var events = { load: function () { console.log('loaded'); }, progress: function (percent) { console.log(percent); progress.value = percent; }, success: function () { console.log('success'); } }; var loader; // 选择好要上传的文件后触发onchange事件 document.getElementById('File').onchange = function (e) { var file = this.files[0]; console.log(file) //loadFile.js loader = new FileLoader(file, events); }; document.getElementById('Abort').onclick = function () { loader.abort(); } </script> </body> </html>
/* * 文件读取模块 * file 文件对象 * events 事件回掉对象 包含 success , load, progress */ var FileLoader = function (file, events) { this.reader = new FileReader(); this.file = file; this.loaded = 0; this.total = file.size; //每次读取1M this.step = 1024 * 1024; this.events = events || {}; //读取第一块 this.readBlob(0); this.bindEvent(); } FileLoader.prototype = { bindEvent: function (events) { var _this = this, reader = this.reader; reader.onload = function (e) { _this.onLoad(); }; reader.onprogress = function (e) { _this.onProgress(e.loaded); }; // start 、abort、error 回调暂时不加 }, // progress 事件回掉 onProgress: function (loaded) { var percent, handler = this.events.progress;//进度条 this.loaded += loaded; percent = (this.loaded / this.total) * 100; handler && handler(percent); }, // 读取结束(每一次执行read结束时调用,并非整体) onLoad: function () { var handler = this.events.load; // 应该在这里发送读取的数据 handler && handler(this.reader.result); // 如果未读取完毕继续读取 if (this.loaded < this.total) { this.readBlob(this.loaded); } else { // 读取完毕 this.loaded = this.total; // 如果有success回掉则执行 this.events.success && this.events.success(); } }, // 读取文件内容 readBlob: function (start) { var blob, file = this.file; // 如果支持 slice 方法,那么分步读取,不支持的话一次读取 if (file.slice) { blob = file.slice(start, start + this.step); } else { blob = file; } this.reader.readAsText(blob); }, // 中止读取 abort: function () { var reader = this.reader; if(reader) { reader.abort(); } } }
So übermitteln Sie ein Dropdown-Menü in HTML Behalten Sie dann den ausgewählten Wert bei und kehren Sie nicht zum Standardwert zurück
So verwenden Sie das Titelattribut von HTML, um Text beim Bewegen der Maus anzuzeigen
Das obige ist der detaillierte Inhalt vonWie man die FileReader-Distribution von H5 zum Lesen von Dateien verwendet und eine Einführung in ihre Methoden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!