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


Posted in HTML / CSS onNovember 09, 2017

本文介绍了浅谈HTML5 FileReader分布读取文件以及其方法简介,分享给大家。具体如下:

效果图

老规矩先上效果图

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

先介绍一下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();
        }
    }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3 优势以及网页设计师如何使用CSS3技术
Jul 29 HTML / CSS
纯css3实现照片墙效果
Dec 26 HTML / CSS
css3 flex实现div内容水平垂直居中的几种方法
Mar 27 HTML / CSS
CSS3为背景图设置遮罩并解决遮罩样式继承问题
Jun 22 HTML / CSS
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
Jan 08 HTML / CSS
HTML5是否真的可以取代Flash
Feb 10 HTML / CSS
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
Jan 09 HTML / CSS
HTML5 Canvas的性能提高技巧经验分享
Jul 02 HTML / CSS
html5本地存储 localStorage操作使用详解
Sep 20 HTML / CSS
HTML5中图片之间的缝隙完美解决方法
Jul 07 HTML / CSS
详解使用双缓存解决Canvas clearRect引起的闪屏问题
Apr 29 HTML / CSS
css3实现背景图片半透明内容不透明的方法示例
Apr 13 HTML / CSS
如何避免常见的6种HTML5错误用法
Nov 06 #HTML / CSS
HTML5添加禁止缩放功能
Nov 03 #HTML / CSS
基于HTML5 Canvas的3D动态Chart图表的示例
Nov 02 #HTML / CSS
HTML5新特性之语义化标签
Oct 31 #HTML / CSS
解决HTML5手机端页面缩放的问题
Oct 27 #HTML / CSS
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
Oct 26 #HTML / CSS
HTML5 文件域+FileReader 分段读取文件并上传到服务器
Oct 23 #HTML / CSS
You might like
PHP中图片等比缩放的实例
2013/03/24 PHP
浅析Mysql 数据回滚错误的解决方法
2013/08/05 PHP
采用memcache在web集群中实现session的同步会话
2014/07/05 PHP
PHP多进程编程实例
2014/10/15 PHP
php绘图之生成饼状图的方法
2015/01/24 PHP
thinkphp框架下404页面设置 仅三步
2016/05/14 PHP
Thinkphp微信公众号支付接口
2016/08/04 PHP
thinkPHP自动验证、自动添加及表单错误问题分析
2016/10/17 PHP
Win10 下安装配置IIS + MySQL + nginx + php7.1.7
2017/08/04 PHP
自动更新作用
2006/10/08 Javascript
基于jquery的点击链接插入链接内容的代码
2012/07/31 Javascript
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
2013/08/27 Javascript
javascript中怎么做对象的类型判断
2013/11/11 Javascript
JS+CSS实现闪烁字体效果代码
2016/04/05 Javascript
JS实现滑动门效果的方法详解
2016/12/19 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
2016/12/20 Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
2018/01/13 Javascript
Vue多系统切换实现方案
2018/06/05 Javascript
JavaScript ES6 Class类实现原理详解
2020/05/08 Javascript
关于python写入文件自动换行的问题
2018/06/23 Python
Python判断字符串是否xx开始或结尾的示例
2019/08/08 Python
Python小程序 控制鼠标循环点击代码实例
2019/10/08 Python
Python实现报警信息实时发送至邮箱功能(实例代码)
2019/11/11 Python
解决keras,val_categorical_accuracy:,0.0000e+00问题
2020/07/02 Python
Omio西班牙:全欧洲低价大巴、火车和航班搜索和比价
2017/02/11 全球购物
史蒂夫·马登加拿大官网:Steve Madden加拿大
2017/11/18 全球购物
澳大利亚在线消费电子产品商店:TobyDeals
2020/01/05 全球购物
汉米尔顿手表官网:Hamilton
2020/09/13 全球购物
社团成立邀请函
2014/01/08 职场文书
婚庆司仪主持词
2014/03/15 职场文书
鼓舞士气的口号
2014/06/16 职场文书
平凡的世界读书笔记
2015/06/25 职场文书
中国梦党课学习心得体会
2016/01/05 职场文书
mysql对于模糊查询like的一些汇总
2021/05/09 MySQL
如何获取numpy array前N个最大值
2021/05/14 Python
Java 实战项目之家居购物商城系统详解流程
2021/11/11 Java/Android