文档章节

HTML5之FileReader的使用

独孤蝈蝈
 独孤蝈蝈
发布于 2017/09/04 19:03
字数 671
阅读 5
收藏 0

HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型。

FileReader的使用方式非常简单,可以按照如下步骤创建FileReader对象并调用其方法:

 

1.检测浏览器对FileReader的支持

​if(window.FileReader) {  
    var fr = new FileReader();  
    // add your code here  
}else{  
    alert("Not supported by your browser!");  
} 

 

 

2. 调用FileReader对象的方法

FileReader 的实例拥有 4 个方法,其中 3 个用以读取文件,另一个用来中断读取。下面的表格列出了这些方法以及他们的参数和功能,需要注意的是 ,无论读取成功或失败,方法并不会返回读取结果,这一结果存储在 result属性中。

方法名 参数 描述
abort none 中断读取
readAsBinaryString file 将文件读取为二进制码
readAsDataURL file 将文件读取为 DataURL
readAsText file, [encoding] 将文件读取为文本

readAsText:该方法有两个参数,其中第二个参数是文本的编码方式,默认值为 UTF-8。这个方法非常容易理解,将文件以文本方式读取,读取的结果即是这个文本文件中的内容。
readAsBinaryString:该方法将文件读取为二进制字符串,通常我们将它传送到后端,后端可以通过这段字符串存储文件。
readAsDataURL:这是例子程序中用到的方法,该方法将文件读取为一段以 data: 开头的字符串,这段字符串的实质就是 Data URL,Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。

 

3. 处理事件

FileReader 包含了一套完整的事件模型,用于捕获读取文件时的状态,下面这个表格归纳了这些事件。

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

文件一旦开始读取,无论成功或失败,实例的 result 属性都会被填充。如果读取失败,则 result 的值为 null ,否则即是读取的结果,绝大多数的程序都会在成功读取文件的时候,抓取这个值。

fr.onload = function() {  
    this.result;  
};  

 

© 著作权归作者所有

共有 人打赏支持
独孤蝈蝈
粉丝 4
博文 59
码字总数 39108
作品 0
朝阳
程序员

暂无文章

区块链教程以太坊源码分析core-state源码分析(一)

兄弟连区块链教程以太坊源码分析core-state源码分析,core/state 包主要为以太坊的state trie提供了一层缓存层(cache) database主要提供了trie树的抽象,提供trie树的缓存和合约代码长度的缓...

兄弟连区块链入门教程
20分钟前
0
0
使用putty上传文件

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: :: 使用putty上传文件 ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: ::linux 用户名 set linux_us......

shzwork
21分钟前
1
0
摹客首家发布Adobe XD插件

10月19日,摹客iDoc发布了支持Adobe XD的插件,这是中国国内首款基于Adobe XD 正式API的插件。 设计师在Adobe XD 中安装并使用此插件,可以将设计稿上传到摹客iDoc,并使用iDoc的全部协作设计...

mo311
22分钟前
0
0
MetInfo最新网站漏洞如何修复以及网站安全防护

metinfo漏洞于2018年10月20号被爆出存在sql注入漏洞,可以直接拿到网站管理员的权限,网站漏洞影响范围较广,包括目前最新的metinfo版本都会受到该漏洞的攻击,该metinfo漏洞产生的主要原因是...

网站安全
22分钟前
0
0
git统计代码行数

$ npm install -g cloc$ cloc . 2193 text files. 1533 unique files. 760 files ignored.github.com/AlDanial/cloc v 1.78 ......

moon888
22分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部