转载

Drag and Drop Files

The FileReader Interface

HTML5 的 FileReader 接口提供了一系列 methods ，可以用来读取 File 或者是 Blob 对象.

所有的methods 都是 asynchronous，意味着读取文件的时候，整个程序不会卡住。

首先生成一个 instance of FileReader

var reader = new FileReader();

method介绍:

readAsText()

用来读取 text 文件。两个parameters:

First: 用来读取 File or Blob 对象
Second(optional): 用来encoding file. 默认是 UTF-8

因为所有方法都是 asynchronous , 所以需要设置 event listner 去监听文件是否读取完。用 onload 来异步完成内容的读取，文件的内容将储存在 FileReader 实例的 result property里面

var reader = new FileReader();  reader.onload = function(e) {     var text = reader.result; }  reader.readAsText(file, encoding);

readAsDataURL()

用来生成图片的 base64 encoded string

var reader = new FileReader();  reader.onload = function(e) {     var dataUrl = reader.result; } reader.readAsDataURL(file);

readAsBinaryString()

生成二进制代码，方便传输，与 XMLHttpRequest.sendAsBinary() 配合使用

var reader = new FileReader();  reader.onload = function(e) {   var rawData = reader.result; }  reader.readAsBinaryString(file);

readAsArrayBuffer()

生成 ArrayBuffer , ArrayBuffer 就是 fixed-length binary data buffer . 当需要操纵文件比如转换JPEG 图像到 PNG的时候很有用

var reader = new FileReader();  reader.onload = function(e) {   var arrayBuffer = reader.result; }  reader.readAsArrayBuffer(file);

abort()

终止文件读取, 常常用在读取大文件的时候

reader.abort();

Examples

Reference

正文到此结束

所属分类：编程技术

本文标签： XML 实例 http HTML example 代码 list HTML5
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

Drag and Drop Files

The FileReader Interface

method介绍:

readAsText()

readAsDataURL()

readAsBinaryString()

readAsArrayBuffer()

abort()

Examples

Reference

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流