FileReader 对象 FileReader 对象主要用来把文件读入内存, 并且读取文件中的数据. 通过构造函数创建一个 FileReader 对象.
这个文件读取对象有以下几种方法:
1.readAsText(): 读取文本文件(可以使用 Txt 打开的文件), 返回文本字符串, 默认编码是 UTF-8.
2.readAsBinaryString(): 读取任意类型的文件. 返回二进制字符串. 这个方法不是用来读取文件展示给用户看, 而是存储文件. 例如: 读取文件的内容, 获取二进制数据, 传递给后台, 后台接收了数据之后, 再将数据存储.
3.readAsDataURL(): 读取文件获取一段以 data 开头的字符串, 这段字符串的本质就是 DataURL.DataURL 是一种将文件 (这个文件一般就是指图像或者能够嵌入到文档的文件格式) 嵌入到文档的方案. DataURL 是将资源转换为 base64 编码的字符串形式, 并且将这些内容直接存储在 url 中>>优化网站的加载速度和执行效率.
自己是一个五年的前端工程师, 希望本文对你有帮助!
这里推荐一下我的前端学习交流扣 qun:731771211 , 里面都是学习前端的, 如果你想制作酷炫的网页, 想学习编程. 自己整理了一份 2019 最全面前端学习资料, 从最基础的 html+CSS+JS[炫酷特效, 游戏, 插件封装, 设计模式] 到移动端 HTML5 的项目实战的学习资料都有整理, 送给每一位前端小伙伴, 每天分享技术
点击: 加入
4.abort(): 中断读取
该对象常见应用在即时预览:
即时: 当用户选择完图片之后就立刻进行预览的处理>>onchange
预览: 通过文件读取对象的 readAsDataURL()完成.
以下是应用时的具体实现:
. HTML 部分
. JS 部分
其中获取数据时, FileReader 还提供一个完整的事件模型, 用来捕获读取文件时的状态.
onabort: 读取文件中断片时触发
onerror: 读取错误时触发
onload: 文件读取成功完成时触发
onloadend: 读取完成时触发, 无论成功还是失败
onloadstart: 开始读取时触发
onprogress: 读取文件过程中持续触发
来源: http://www.jianshu.com/p/1c2bcd1475cb