FileReader 对象 FileReader 对象主要用来把文件读入内存, 并且读取文件中的数据. 通过构造函数创建一个 FileReader 对象.
这个文件读取对象有以下几种方法:
1.readAsText(): 读取文本文件(可以使用 Txt 打开的文件), 返回文本字符串, 默认编码是 UTF-8.
2.readAsBinaryString(): 读取任意类型的文件. 返回二进制字符串. 这个方法不是用来读取文件展示给用户看, 而是存储文件. 例如: 读取文件的内容, 获取二进制数据, 传递给后台, 后台接收了数据之后, 再将数据存储.
3.readAsDataURL(): 读取文件获取一段以 data 开头的字符串, 这段字符串的本质就是 DataURL.DataURL 是一种将文件 (这个文件一般就是指图像或者能够嵌入到文档的文件格式) 嵌入到文档的方案. DataURL 是将资源转换为 base64 编码的字符串形式, 并且将这些内容直接存储在 url 中>>优化网站的加载速度和执行效率.
4.abort(): 中断读取
该对象常见应用在即时预览:
即时: 当用户选择完图片之后就立刻进行预览的处理>>onchange
预览: 通过文件读取对象的 readAsDataURL()完成.
以下是应用时的具体实现:
. html 部分
image
. JS 部分
image
其中获取数据时, FileReader 还提供一个完整的事件模型, 用来捕获读取文件时的状态.
onabort: 读取文件中断片时触发
onerror: 读取错误时触发
onload: 文件读取成功完成时触发
onloadend: 读取完成时触发, 无论成功还是失败
onloadstart: 开始读取时触发
onprogress: 读取文件过程中持续触发
如果你依然在编程的世界里迷茫, 不知道自己的未来规划, 可以加入我们的 web 前端学习扣 q-u-n:767273102 里面可以与大神一起交流并走出迷茫. 小白可进群免费领取学习资料, 看看前辈们是如何在编程的世界里傲然前行! 不停更新最新的教程和学习方法(进群送 Web 前端系统学习路线, 详细的前端项目实战教学视频), 有想学习 Web 前端的, 或是转行, 或是大学生, 还有工作中想提升自己能力的, 正在学习的小伙伴欢迎加入.
前端开发技术分享
来源: http://www.jianshu.com/p/1a6d5af192f8