這次給大家?guī)?lái)H5的FileReader分布讀取文件應(yīng)該如何使用以及其方法簡(jiǎn)介，H5的FileReader分布讀取文件的使用以及其方法簡(jiǎn)介的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來(lái)看一下。

先介紹一下H5中FileReader的一些方法以及事件

FileReader方法

名稱 作用

about() 終止讀取

readAsBinaryString(file) 將文件讀取為二進(jìn)制編碼

readAsDataURL(file) 將文件讀取為DataURL編碼

readAsText(file, [encoding]) 將文件讀取為文本

readAsArrayBuffer(file) 將文件讀取為arraybuffer

FileReader事件

名稱

作用

onloadstart 讀取開(kāi)始時(shí)觸發(fā)

onprogress 讀取中

onloadend 讀取完成觸發(fā)，無(wú)論成功或失敗

onload 文件讀取成功完成時(shí)觸發(fā)

onabort 中斷時(shí)觸發(fā)

onerror 出錯(cuò)時(shí)觸發(fā)

代碼

分布讀取文件核心思想, 將文件分塊以每M進(jìn)行讀取.

HTML部分

Document

分步讀取文件：

讀取進(jìn)度：

var progress = document.getElementById('Progress');//進(jìn)度條

var events = {

load: function () {

console.log('loaded');

},

progress: function (percent) {

console.log(percent);

progress.value = percent;

},

success: function () {

console.log('success');

}

};

var loader;

// 選擇好要上傳的文件后觸發(fā)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 文件對(duì)象

* events 事件回掉對(duì)象 包含 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 回調(diào)暫時(shí)不加

},

// progress 事件回掉

onProgress: function (loaded) {

var percent,

handler = this.events.progress;//進(jìn)度條

this.loaded += loaded;

percent = (this.loaded / this.total) * 100;

handler && handler(percent);

},

// 讀取結(jié)束(每一次執(zhí)行read結(jié)束時(shí)調(diào)用，并非整體)

onLoad: function () {

var handler = this.events.load;

// 應(yīng)該在這里發(fā)送讀取的數(shù)據(jù)

handler && handler(this.reader.result);

// 如果未讀取完畢繼續(xù)讀取

if (this.loaded < this.total) {

this.readBlob(this.loaded);

} else {

// 讀取完畢

this.loaded = this.total;

// 如果有success回掉則執(zhí)行

this.events.success && this.events.success();

}

},

// 讀取文件內(nèi)容

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

}

}

}

相信看了這些案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！

相關(guān)閱讀：

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。