這篇文章將為大家詳細(xì)講解有關(guān)H5的FileReader分布讀取文件怎么使用，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),烏達(dá)企業(yè)網(wǎng)站建設(shè),烏達(dá)品牌網(wǎng)站建設(shè),網(wǎng)站定制,烏達(dá)網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,烏達(dá)網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

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

FileReader方法

名稱      作用

about()    終止讀取

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

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

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

readAsArrayBuffer(file)    將文件讀取為arraybuffer

FileReader事件

名稱

作用

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

onprogress    讀取中

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

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

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

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

代碼

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

HTML部分

 

    
    

 

    

        

            
分步讀取文件：
            
            
            

                讀取進(jìn)度：
                
            
        
    
    
    

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 回調(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();
        }
    }
}

關(guān)于H5的FileReader分布讀取文件怎么使用就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。