HTML5 FileReader分布读取文件以及其方法简介

原创 2017年05月02日 22:58:09

效果图

老规矩先上效果图
这里写图片描述

先介绍一下H5中FileReader的一些方法以及事件

FileReader方法

名称 作用
about() 终止读取
readAsBinaryString(file) 将文件读取为二进制编码
readAsDataURL(file) 将文件读取为DataURL编码
readAsText(file, [encoding]) 将文件读取为文本
readAsArrayBuffer(file)​​​​​​​ 将文件读取为arraybuffer

FileReader事件

名称 作用
onloadstart 读取开始时触发
onprogress 读取中
onloadend 读取完成触发,无论成功或失败
onload 文件读取成功完成时触发
onabort 中断时触发
onerror 出错时触发

代码

分布读取文件核心思想, 将文件分块以每M进行读取.

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>读取进度:</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部分

/*
* 文件读取模块
* 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();
        }
    }
}
版权声明:本文为博主原创文章,未经博主允许不得转载。

H5利用FileReader上传图片

1. Html部分 文件上传演练 Browse... ...
  • ChauncyWu
  • ChauncyWu
  • 2017年01月22日 19:50
  • 4913

HTML5之FileReader的使用

HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型。 FileReader的使用...
  • jackfrued
  • jackfrued
  • 2013年05月23日 22:46
  • 93707

HTML5学习之FileReader接口

用来把文件读入内存,并且读取文件中的数据。FileReader接口提供了一个异步API,使用该API可以在浏览器主线程中异步访问文件系统,读取文件中的数据。到目前文职,只有FF3.6+和Chrome6...
  • zk437092645
  • zk437092645
  • 2013年04月01日 11:59
  • 104174

h5中的fileAPI的使用方法

用来把文件读入内存,并且读取文件中的数据。FileReader接口提供了一个异步API,使用该API可以在浏览器主线程中异步访问文件系统,读取文件中的数据。到目前文职,只有FF3.6+和Chrome6...
  • walliamliu
  • walliamliu
  • 2016年12月25日 13:29
  • 2755

input标签上传图片到后端前用H5的FileReader 方法实现图片的显示

要想在页面上显示上传的本地图片,以前我们的做法是将选择的图片文件上传至后端服务器,后端对其进行存储,再将图片的URL返回到前端,前端通过这个URL来显示图片。而H5的FileReader接口支持本地预...
  • zjbkzj
  • zjbkzj
  • 2017年04月11日 16:44
  • 2759

Blob对象和FileReader接口

Blob对象: 它表示二进制原始数据,提供一个slice方法,可以通过该方法访问到字节内部的原始数据快,file对象也继承了这个Blob对象 它有两个属性1.size属性:表示一个Blob对象的长度 ...
  • ziy10231207
  • ziy10231207
  • 2016年07月12日 16:22
  • 1480

HTML5 FileReader 读取txt文件

JS读取本地txt 最近有从本地读取txt文件的需要,奈何网上搜索js读取本地txt,都是新建一个fso对象,即(FileSystemObject)。...
  • j_bleach
  • j_bleach
  • 2016年12月11日 19:20
  • 7991

使用html5 FileReader获取图片,并异步上传到服务器(不使用iframe)

使用html5 FileReader获取图片,并异步上传到服务器(不使用iframe)
  • fdipzone
  • fdipzone
  • 2014年07月20日 00:37
  • 57266

HTML5学习之FileReader接口

用来把文件读入内存,并且读取文件中的数据。FileReader接口提供了一个异步API,使用该API可以在浏览器主线程中异步访问文件系统,读取文件中的数据。到目前文职,只有FF3.6+和Chrome6...
  • vinifoxmailcom
  • vinifoxmailcom
  • 2015年12月08日 14:52
  • 877

html5 FileReader

FileReader可以已异步的方式用来操作input元素选取的文件,拖拽操作获取的文件以及来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后的返回结果.构造函数Fi...
  • yingxiake
  • yingxiake
  • 2016年03月13日 23:27
  • 1624
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5 FileReader分布读取文件以及其方法简介
举报原因:
原因补充:

(最多只允许输入30个字)