How does H5's FileReader read files distributedly?

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

nbsp;html>


    <meta>
    <title>Document</title>


    

        

            

分步读取文件：

                                      

                读取进度：                              

        

    

    <script></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>

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 <p> 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! </p><p>Recommended reading:</p><p style="text-align: left;"><a href="http://www.php.cn/html5-tutorial-390236.html" target="_blank">Summary of various incorrect usages of H5</a><br></p><p style="text-align: left;"><a href="http://www.php.cn/html5-tutorial-390234.html" target="_blank">How Canvas makes a 3D dynamic Chart</a><br></p>

The above is the detailed content of How does H5's FileReader read files distributedly?. For more information, please follow other related articles on the PHP Chinese website!