这次给大家带来H5的FileReader怎样分布读取文件，FileReader分布读取文件的注意事项有哪些，下面就是实战案例，一起来看一下。
效果图
老规矩先上效果图
先介绍一下H5中FileReader的一些方法以及事件
FileReader方法
| 名称 |
作用 |
| about() |
终止读取 |
| readAsBinaryString(file) |
将文件读取为二进制编码 |
| readAsDataURL(file) |
将文件读取为DataURL编码 |
| readAsText(file, [encoding]) |
将文件读取为文本 |
| readAsArrayBuffer(file) |
将文件读取为arraybuffer |
FileReader事件
| 名称 |
作用 |
| onloadstart |
读取开始时触发 |
| onprogress |
读取中 |
| onloadend |
读取完成触发，无论成功或失败 |
| onload |
文件读取成功完成时触发 |
| onabort |
中断时触发 |
| onerror |
出错时触发 |
代码
分布读取文件核心思想, 将文件分块以每M进行读取.
HTML部分
nbsp;html>
<meta>
<title>Document</title>
<script></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>
loadFile.js部分
