登录  /  注册
首页 > web前端 > H5教程 > 正文

具体解析HTML5文件读取FileReader及文件读取模块的封装

黄舟
发布: 2017-03-11 16:04:57
原创
2130人浏览过

filereader是file-api重要的组成部分
用于读取本地文件

FileReader

创建

要想使用读取文件功能
同样需要实例化FileReader对象

var fr = new FileReader();
登录后复制

它为我们提供了一些接口方法和事件

方法

通过实例对象可以调用5个方法
其中4个指定文件读取方式
另1种方法用来中断文件读取

API参数描述
FileReader.readAsBinaryStringFile/Blob文件读取为二进制字符串,每字节包含一个0到255之间的整数
FileReader.readAsTextFile/Blob[,encoding]文件读取为文本字符串。默认文本编码格式是’UTF-8’,可通过可选参数指定为其他编码格式
FileReader.readAsDataURLFile/Blob文件读取为一个基于Base64编码的Data-URI对象
FileReader.readAsArrayBufferFile/Blob文件读取为一个ArrayBuffer对象
abort()终止文件读取

注:Blob(Binary Large Object)是二进制对象

无论文件读取成功与否
这些函数不会有任何返回值
读取的文件结果存储于实例化的FileReader对象的result属性中

事件

文件读取对象中除了上面的方法之外
还包含一套完整的事件模型
用于捕获在文件读取的各个状态

  • onloadstart : 开始读取

  • onprogress : 正在读取

  • onload : 读取成功

  • onerror : 读取错误

  • onabort : 读取中断

  • onloadend : 读取完成(无论成败)

使用

现在我们使用这个Filereader来读取一个本地图像
html如下
简单创建了一个文件读取按钮input
和一个用来显示所读取图片的img标签

<input type="file" id="choose"><br><br><img  src="" id="image"    style="max-width:90%"具体解析HTML5文件读取FileReader及文件读取模块的封装" >
登录后复制


js脚本如下

var choose = document.getElementById(&#39;choose&#39;);var img = document.getElementById(&#39;image&#39;);
choose.onchange = function(){
  showImg(this, img);
}function showImg(chooseDom, imgDom){
  var file = chooseDom.files[0]; //获取FileList对象的第一个元素——一个File对象
  var fr = new FileReader(); //实例化FileReader对象
  fr.onload = function(e){ 
    imgDom.src = e.target.result; //e.target引用fr
  }
  fr.readAsDataURL(file); //读取为DataURL}
登录后复制

获取节点后
为input标签绑定change事件
这样当每次选择文件后,就会调用showImg函数进行读取

验证读取内容可以检查file.type

if(!/image\/\w+/.test(file.type)){  
    //...
    return false;  
}
登录后复制

或者如果想要读取文字
就是用readAsText

<input type="file" id="choose"><br><br><p id="demo"></p>
登录后复制
var choose = document.getElementById(&#39;choose&#39;);
var demo = document.getElementById(&#39;demo&#39;);
choose.onchange = function(){
  showText(this, demo);
}function showText(chooseDom, textDom){
  var file = chooseDom.files[0];  var fr = new FileReader();
  fr.onload = function(e){
    textDom.innerHTML = e.target.result;
  }
  fr.readAsText(file);
}
登录后复制

文件读取模块

为了更好的处理文件读取
我们需要封装一个文件读取模块

//events事件回调对象包含
success,load,progressvar FileLoader = function (file, events) {
    this.reader = new FileReader();    
    this.file = file;    
    this.loaded = 0;    
    this.total = file.size;    
    this.step = 1024 * 1024;//每次读取1M
    this.events = events || {};    
    this.bindEvent();    
    this.readBlob(0);//读取第一块}
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回调暂无
    },
    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 + 1);
        } else {
            blob = file;
        }        this.reader.readAsText(blob);
    },    
    // 中止读取
    abort: function () {
        var reader = this.reader;        
        if(reader) {
            reader.abort();
        }
    }
}
登录后复制

以上就是具体解析HTML5文件读取FileReader及文件读取模块的封装的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号