HTML5
的 FileReader
接口提供了一系列 methods ,可以用来读取 File
或者是 Blob
对象.
所有的methods 都是 asynchronous,意味着读取文件的时候,整个程序不会卡住。
首先生成一个 instance of FileReader
var reader = new FileReader();
用来读取 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);
用来生成图片的 base64 encoded string
var reader = new FileReader(); reader.onload = function(e) { var dataUrl = reader.result; } reader.readAsDataURL(file);
生成二进制代码,方便传输,与 XMLHttpRequest.sendAsBinary()
配合使用
var reader = new FileReader(); reader.onload = function(e) { var rawData = reader.result; } reader.readAsBinaryString(file);
生成 ArrayBuffer
, ArrayBuffer
就是 fixed-length binary data buffer
. 当需要操纵文件比如转换JPEG 图像到 PNG的时候很有用
var reader = new FileReader(); reader.onload = function(e) { var arrayBuffer = reader.result; } reader.readAsArrayBuffer(file);
终止文件读取, 常常用在读取大文件的时候
reader.abort();