HTML5 FileReader reads the file and an introduction to its distribution method

Renderings

The old rules on the first renderings
Write pictures described here

First tell us about some of the ways in FileReader H5 and events

FileReader method

name	effect
about()	Read termination
readAsBinaryString(file)	The file is read as a binary encoding
readAsDataURL(file)	The document read as DataURL coding
readAsText(file, [encoding])	Will read a text file
readAsArrayBuffer(file)	The document read as arraybuffer

FileReader events

name	effect
onloadstart	When the trigger to start reading
onprogress	Loading
onloadend	Read completion trigger, regardless of success or failure
onload	When the file is read successfully completed trigger
Onboart	When an interrupt is triggered
onerror	Error trigger

Code

The core idea of the distribution of the file to read the file read per block M.

HTML part


<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>读取进度：</lable>
                <progress id="Progress" value="0" max="100"></progress>
            </p>
        </fieldset>
    </form>
    <script src="./loadFile.js"></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);
            };
大专栏  HTML5 FileReader分布读取文件以及其方法简介r/>            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 回调暂时不加
    },
    // 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;

        // If the support slice method, the reading step, the first reading is not supported, then IF (file.slice) {             BLOB = file.slice (Start, + Start the this .step);         } the else {             BLOB = File;         }
        





        the this .reader.readAsText (BLOB); 
    }, // read abort     ABORT: function (
    
) {
        var reader = this.reader;

        if(reader) {
            reader.abort();
        }
    }
}

HTML5 FileReader reads the file and an introduction to its distribution method

Renderings

FileReader method

FileReader events

Code

Guess you like