這次給大家帶來H5的FileReader分布讀取文件應該如何使用以及其方法簡介，H5的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部分

Document

分步讀取文件：

讀取進度：

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();

}

loadFile.js部分/*

* 文件讀取模塊

* 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();

}

}

}

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

總結

以上是生活随笔為你收集整理的html5 filereader读取文件,H5的FileReader分布读取文件应该如何使用以及其方法简介...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。