The FileReader Interface

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

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

首先生成一个 instance ofFileReader

var reader = new FileReader();

method介绍:

readAsText()

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

• First: 用来读取FileorBlob对象

• Second(optional): 用来encoding file. 默认是UTF-8

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

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

• Reading Files Using The HTML5 FileReader API

• dragzone.js