Drag and Drop Files
jopen
9年前
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();