HTML5中FileReader接口使用方法实例详解


Posted in HTML / CSS onAugust 26, 2017

用来把文件读入内存,并且读取文件中的数据。FileReader接口提供了一个异步API,使用该API可以在浏览器主线程中异步访问文件系统,读取文件中的数据。到目前文职,只有FF3.6+和Chrome6.0+实现了FileReader接口。

1、FileReader接口的方法

FileReader接口有4个方法,其中3个用来读取文件,另一个用来中断读取。无论读取成功或失败,方法并不会返回读取结果,这一结果存储在result属性中。

FileReader接口的方法

方法名 参数 描述
readAsBinaryString file 将文件读取为二进制编码
readAsText file,[encoding] 将文件读取为文本
readAsDataURL file 将文件读取为DataURL
abort (none) 终端读取操作

2、FileReader接口事件

FileReader接口包含了一套完整的事件模型,用于捕获读取文件时的状态。

FileReader接口的事件

事件 描述
onabort 中断
onerror 出错
onloadstart 开始
onprogress 正在读取
onload 成功读取
onloadend 读取完成,无论成功失败

3、FileReader接口的使用

<script type="text/javascript">  
var result=document.getElementById("result");  
var file=document.getElementById("file");  
//判断浏览器是否支持FileReader接口  
if(typeof FileReader == 'undefined'){  
    result.InnerHTML="<p>你的浏览器不支持FileReader接口!</p>";  
    //使选择控件不可操作  
    file.setAttribute("disabled","disabled");  
}  
function readAsDataURL(){  
    //检验是否为图像文件  
    var file = document.getElementById("file").files[0];  
    if(!/image\/\w+/.test(file.type)){  
        alert("看清楚,这个需要图片!");  
        return false;  
    }  
    var reader = new FileReader();  
    //将文件以Data URL形式读入页面  
    reader.readAsDataURL(file);  
    reader.onload=function(e){  
        var result=document.getElementById("result");  
        //显示文件  
        result.innerHTML='<img src="' + this.result +'" alt="" />';  
    }  
}  
function readAsBinaryString(){  
    var file = document.getElementById("file").files[0];  
    var reader = new FileReader();  
    //将文件以二进制形式读入页面  
    reader.readAsBinaryString(file);  
    reader.onload=function(f){  
        var result=document.getElementById("result");  
        //显示文件  
        result.innerHTML=this.result;  
    }  
}  
function readAsText(){  
    var file = document.getElementById("file").files[0];  
    var reader = new FileReader();  
    //将文件以文本形式读入页面  
    reader.readAsText(file);  
    reader.onload=function(f){  
        var result=document.getElementById("result");  
        //显示文件  
        result.innerHTML=this.result;  
    }  
}  
</script>  
<p>  
    <label>请选择一个文件:</label>  
    <input type="file" id="file" />  
    <input type="button" value="读取图像" onclick="readAsDataURL()" />  
    <input type="button" value="读取二进制数据" onclick="readAsBinaryString()" />  
    <input type="button" value="读取文本文件" onclick="readAsText()" />  
</p>  
<div id="result" name="result"></div>

总结

以上所述是小编给大家介绍的HTML5中FileReader接口使用方法实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
全面总结使用CSS实现水平垂直居中效果的方法
Mar 10 HTML / CSS
浅谈CSS3鼠标移入图片动态提示效果(transform)
Nov 06 HTML / CSS
CSS3 @keyframes简单动画实现
Feb 24 HTML / CSS
浅谈HTML5新增及移除的元素
Jun 27 HTML / CSS
Html5中的桌面通知Notification的实现
Sep 25 HTML / CSS
详解Canvas事件绑定
Jun 27 HTML / CSS
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
Jan 03 HTML / CSS
微信浏览器取消缓存的方法
Mar 28 HTML / CSS
HTML5事件方法全部汇总
May 12 HTML / CSS
html5移动端价格输入键盘的实现
Sep 16 HTML / CSS
html5响应式开发自动计算fontSize的方法
Jan 13 HTML / CSS
CSS3中Animation实现简单的手指点击动画的示例
Jul 15 HTML / CSS
html5使用canvas实现图片下载功能的示例代码
Aug 26 #HTML / CSS
html5+CSS3+JS实现七夕言情功能代码
Aug 28 #HTML / CSS
html5使用html2canvas实现浏览器截图的示例
Aug 31 #HTML / CSS
前端面试必备之html5的新特性
Sep 05 #HTML / CSS
html5仿支付宝密码框的实现代码
Sep 06 #HTML / CSS
HTML5 本地存储实现购物车功能
Sep 07 #HTML / CSS
HTML5 FormData 方法介绍以及实现文件上传示例
Sep 12 #HTML / CSS
You might like
《雄兵连》系列首部大电影《烈阳天道》:可能是因为期望值太高了
2020/08/18 国漫
php 自写函数代码 获取关键字 去超链接
2010/02/08 PHP
PHP生成自定义长度随机字符串的函数分享
2014/05/04 PHP
PHP向浏览器输出内容的4个函数总结
2014/11/17 PHP
smarty表格换行实例
2014/12/15 PHP
浅谈PHP中单引号和双引号到底有啥区别呢?
2015/03/04 PHP
PHP中使用foreach()遍历二维数组的简单实例
2016/06/13 PHP
Yii框架弹出窗口组件CJuiDialog用法分析
2017/01/07 PHP
jquery模拟按下回车实现代码
2011/09/20 Javascript
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
2013/03/21 Javascript
解决jquery中美元符号命名冲突问题
2014/01/08 Javascript
javascript获取函数名称、函数参数、对象属性名称的代码实例
2014/04/12 Javascript
采用call方式实现js继承
2014/05/20 Javascript
javascript中加号(+)操作符的一些神奇作用
2014/06/06 Javascript
js中实现多态采用和继承类似的方法
2014/08/22 Javascript
Jquery实现由下向上展开效果的例子
2014/12/08 Javascript
简介alert()与console.log()的不同
2015/08/26 Javascript
JS与HTML结合使用marquee标签实现无缝滚动效果代码
2016/07/05 Javascript
JS中如何实现Laravel的route函数详解
2017/02/12 Javascript
使用vue实现多规格选择实例(SKU)
2019/08/23 Javascript
[01:03:36]Ti4 循环赛第三日DK vs Titan
2014/07/12 DOTA
[43:03]LGD vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
Python中类的初始化特殊方法
2017/12/01 Python
Python对List中的元素排序的方法
2018/04/01 Python
python binascii 进制转换实例
2019/06/12 Python
Python3 合并二叉树的实现
2019/09/30 Python
pytorch-神经网络拟合曲线实例
2020/01/15 Python
TensorFlow的环境配置与安装教程详解(win10+GeForce GTX1060+CUDA 9.0+cuDNN7.3+tensorflow-gpu 1.12.0+python3.5.5)
2020/06/22 Python
Raffaello Network西班牙:意大利拉斐尔时尚购物网
2019/03/12 全球购物
后勤人员岗位职责
2013/12/17 职场文书
办公室岗位职责
2014/02/12 职场文书
客服专员岗位职责
2014/02/28 职场文书
中秋晚会策划方案
2014/06/12 职场文书
预备党员自我批评思想汇报
2014/10/10 职场文书
个人政风行风自查自纠报告
2014/10/21 职场文书
职工食堂管理制度
2015/08/06 职场文书