效果图
老规矩先上效果图
先介绍一下H5中FileReader的一些方法以及事件
FileReader方法
名称 |
作用 |
about() |
终止读取 |
readAsBinaryString(file) |
将文件读取为二进制编码 |
readAsDataURL(file) |
将文件读取为DataURL编码 |
readAsText(file, [encoding]) |
将文件读取为文本 |
readAsArrayBuffer(file) |
将文件读取为arraybuffer |
FileReader事件
名称 |
作用 |
onloadstart |
读取开始时触发 |
onprogress |
读取中 |
onloadend |
读取完成触发,无论成功或失败 |
onload |
文件读取成功完成时触发 |
onabort |
中断时触发 |
onerror |
出错时触发 |
代码
分布读取文件核心思想, 将文件分块以每M进行读取.
HTML部分
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54
|
<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;
document.getElementById('File').onchange = function (e) { var file = this.files[0]; console.log(file)
loader = new FileLoader(file, events); }; 大专栏 HTML5 FileReader分布读取文件以及其方法简介r/> document.getElementById('Abort').onclick = function () { loader.abort(); } </script> </body> </html>
|
loadFile.js部分
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84
|
var FileLoader = function (file, events) { this.reader = new FileReader(); this.file = file; this.loaded = 0; this.total = file.size; 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); };
}, onProgress: function (loaded) { var percent, handler = this.events.progress;
this.loaded += loaded; percent = (this.loaded / this.total) * 100; handler && handler(percent); }, 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; this.events.success && this.events.success(); } }, readBlob: function (start) { var blob, file = this.file;
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(); } } }
|