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 相关文章推荐
CSS3 绘制BMW logo实的现代码
Apr 25 HTML / CSS
使用css3背景渐变中的透明度来设置不同颜色的背景渐变
Mar 31 HTML / CSS
canvas之万花筒效果的简单实现(推荐)
Aug 16 HTML / CSS
纯CSS3实现运行时钟的示例代码
Jan 25 HTML / CSS
网页中的电话号码如何实现一键直呼效果_附示例
Mar 15 HTML / CSS
HTML5离线缓存Manifest是什么
Mar 09 HTML / CSS
html5新特性与用法大全
Sep 13 HTML / CSS
HTML5 Canvas 起步(1) - 基本概念
May 12 HTML / CSS
HTML5之SVG 2D入门10—滤镜的定义及使用
Jan 30 HTML / CSS
HTML5 Video/Audio播放本地文件示例介绍
Nov 18 HTML / CSS
Html5 canvas实现粒子时钟的示例代码
Sep 06 HTML / CSS
AmazeUI导航的示例代码
Aug 14 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
php中计算中文字符串长度、截取中文字符串的函数代码
2011/08/09 PHP
使用YUI+Ant 实现JS CSS压缩
2014/09/02 PHP
php根据命令行参数生成配置文件详解
2019/03/15 PHP
js 页面刷新location.reload和location.replace的区别小结
2009/12/24 Javascript
JS date对象的减法处理实现代码
2010/12/28 Javascript
setinterval()与clearInterval()JS函数的调用方法
2015/01/21 Javascript
JQuery插件jcarousellite的参数中文说明
2015/05/11 Javascript
使用AngularJS对路由进行安全性处理的方法
2015/06/18 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
2015/08/24 Javascript
js实现仿京东2级菜单效果(带延时功能)
2015/08/27 Javascript
jQuery双向列表选择器select版
2016/11/01 Javascript
简单实现IONIC购物车功能
2017/01/10 Javascript
js遍历添加栏目类添加css 再点击其它删除css【推荐】
2018/06/12 Javascript
JavaScript设计模式之单例模式简单实例教程
2018/07/02 Javascript
微信小程序视图控件与bindtap之间的问题的解决
2019/04/08 Javascript
Layui动态生成select下拉选择框不显示的解决方法
2019/09/24 Javascript
python错误:AttributeError: 'module' object has no attribute 'setdefaultencoding'问题的解决方法
2014/08/22 Python
pygame学习笔记(5):游戏精灵
2015/04/15 Python
详解Python读取配置文件模块ConfigParser
2017/05/11 Python
人工智能最火编程语言 Python大战Java!
2017/11/13 Python
Python模块搜索路径代码详解
2018/01/29 Python
python运行时强制刷新缓冲区的方法
2019/01/14 Python
python自动发送测试报告邮件功能的实现
2019/01/22 Python
python实现视频分帧效果
2019/05/31 Python
用Python写一个自动木马程序
2019/09/17 Python
jupyter note 实现将数据保存为word
2020/04/14 Python
Python基于pandas爬取网页表格数据
2020/05/11 Python
Pytorch 使用CNN图像分类的实现
2020/06/16 Python
python实现数字炸弹游戏
2020/07/17 Python
pandas针对excel处理的实现
2021/01/15 Python
python 指定源路径来解决import问题的操作
2021/03/04 Python
乌克兰电子产品和家用电器购物网站:TOUCH
2019/08/09 全球购物
2014年国庆晚会主持词
2014/09/19 职场文书
2016年学校党支部创先争优活动总结
2016/04/05 职场文书
学会用Python实现滑雪小游戏,再也不用去北海道啦
2021/05/20 Python
十大最强火系宝可梦,喷火龙上榜,第一名有双火属性
2022/03/18 日漫