Home > Article > Web Front-end > How does H5's FileReader read files distributedly?

How does H5's FileReader read files distributedly?

php中世界最好的语言Original: 2018-03-27 14:16:581714browse

This time I will bring you how to distribute H5 FileReaderread files, what are the precautions for FileReader to distribute and read files, the following is a practical case, let’s take a look .

Renderings

Old rules include renderings first

First introduce some methods and events of FileReader in H5

FileReader method

Name	Function
about()	Terminate reading
readAsBinaryString(file)	Read the file as binary encoding
readAsDataURL( file)	Read the file as DataURL encoding
readAsText(file, [encoding])	Read the file as text
readAsArrayBuffer(file)	Read the file as arraybuffer

FileReader event

Name	Function
onloadstart	Triggered when reading starts
onprogress	Reading
onloadend	Reading completion triggers, regardless of success or failure
onload	Triggered when file reading is successfully completed
onabort	Triggered when interrupted
onerror	Triggered when an error occurs

Code

The core idea of reading the file is distributed, dividing the file into chunks for each M to read.

HTML part

<!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>读取进度：</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);
            };
            document.getElementById('Abort').onclick = function () {
                loader.abort();
            }
        </script>
</body>
</html>

loadFile.js part

/*
* 文件读取模块
* 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();
        }
    }
}

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to php Chinese website Other related articles!

How does H5's FileReader read files distributedly?

Related articles