Home > Article > Web Front-end > How to use H5's FileReader distribution to read files and an introduction to its methods

How to use H5's FileReader distribution to read files and an introduction to its methods

php中世界最好的语言Original: 2018-01-29 09:34:332284browse

This time I will bring you how to use H5's FileReader distribution to read files and a brief introduction to its methods. What are the precautions for using H5's FileReader distribution to read files and its method introduction? The following is a practical case. Let's take a look. take a look.

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 Triggered when reading is completed, regardless of success or failure

onload Triggers when file reading is successfully completed

onabort Triggers when interrupted

onerror Triggers when an error occurs

Code

Distributed reading of files The core idea is to divide the file into chunks and read it every M.

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(&#39;Progress&#39;);//进度条
 
            var events = {
                load: function () {
                    console.log(&#39;loaded&#39;);
                },
                progress: function (percent) {
                    console.log(percent);
                    progress.value = percent;
                },
                success: function () {
                    console.log(&#39;success&#39;);
                }
            };
            var loader;
 
            // 选择好要上传的文件后触发onchange事件
            document.getElementById(&#39;File&#39;).onchange = function (e) {
                var file = this.files[0];
                console.log(file)
 
                //loadFile.js
                loader = new FileLoader(file, events);
            };
 
            document.getElementById(&#39;Abort&#39;).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 methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

How to use H5's FileReader distribution to read files and an introduction to its methods

Related articles