This article introduces a brief introduction to HTML5 FileReader distributed reading of files and its method, and shares it with everyone. The details are as follows:
renderings
The old rule is to show the renderings first.
First introduce some methods and events of FileReader in H5
FileReader method
| name | effect |
|---|---|
| about() | Terminate reading |
| readAsBinaryString(file) | Read file as binary encoding |
| readAsDataURL(file) | Read file as DataURL encoded |
| readAsText(file, [encoding]) | Read file as text |
| readAsArrayBuffer(file) | Read file into arraybuffer |
FileReaderEvent
| name | effect |
|---|---|
| onloadstart | Fires when reading starts |
| onprogress | Reading |
| onloadend | Triggered by read completion, regardless of success or failure |
| onload | Triggered when file read completes successfully |
| onabort | Triggered on interrupt |
| onerror | Triggered on error |
code
The core idea of distributed reading of files is to divide the file into blocks and read them every M.
HTML part
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>Document</title></head><body> <form> <fieldset> <legend>Read step by step File:</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' );//Progress bar var events = { load: function () { console.log('loaded'); }, progress: function (percent) { console.log(percent); progress.value = percent; }, success: function () { console.log('success'); } }; var loader; // Trigger the onchange event after selecting the file to upload 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>loadFile.js section
/** File reading module* file file object* events event return object includes success, load, progress*/var FileLoader = function (file, events) { this.reader = new FileReader(); this.file = file; this.loaded = 0; this.total = file.size; //Read 1M each time this.step = 1024 * 1024; this.events = events || {}; //Read the first block 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 callbacks are not added for the time being}, // The progress event returns onProgress: function (loaded) { var percent, handler = this.events.progress;//Progress bar this.loaded += loaded; percent = (this. loaded / this.total) * 100; handler && handler(percent); }, //End of reading (called at the end of each read execution, not the entirety) onLoad: function () { var handler = this.events.load; // The read data should be sent here handler && handler(this.reader.result); // If the reading is not completed, continue reading if (this.loaded < this.total) { this.readBlob(this.loaded); } else { // Read completed this.loaded = this.total; // If success returns, execute this.events.success && this.events.success(); } }, // Read the file content readBlob: function (start) { var blob, file = this.file; // If the slice method is supported, then read in steps, if not, once Read if (file.slice) { blob = file.slice(start, start + this.step); } else { blob = file; } this.reader.readAsText(blob); }, // Abort reading abort: function () { var reader = this.reader; if(reader) { reader.abort(); } }}The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.