H5的FileReader分布讀取文件怎么使用

這篇文章將為大家詳細(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è)競爭力?？沙浞譂M足這一群體相比中小企業(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部分

<!DOCTYPE html>
<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>讀取進(jìn)度：</lable>
                <progress id="Progress" value="0" max="100"></progress>
            </p>
        </fieldset>
    </form>
    <script src="./loadFile.js"></script>
    <script>
 
            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();
            }
        </script>
</body>
</html>

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ò)，可以把它分享出去讓更多的人看到。

當(dāng)前名稱：H5的FileReader分布讀取文件怎么使用
分享路徑：http://aaarwkj.com/article10/igjido.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、建站公司、虛擬主機(jī)、企業(yè)建站、面包屑導(dǎo)航、網(wǎng)站設(shè)計(jì)公司

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

H5的FileReader分布讀取文件怎么使用