关于Javascript 中的 FileReader, XMLHttpRequest, Blob, ArrayBuffer, DataURL 等

FileReader 用于读取 Blob 和 File

Blob 是 HTML 中内嵌对象的媒体数据, 如Jpeg文件内容

File 就是 HTML 中 <Input type='File'> 的文件

如: 

var reader = new FileReader();

reader.readerAsArrayBuffer ( fileOrBlob );

当 reader 真正加载数时, 会调用 reader.onload 这个回调函数

reader.onload = function(){

var buffer = reader.result;// 这时才能取 result 的值

Console.log(buffer.byteLength);

};// 注: 回调函数的设定应该在调用 readerAsArrayBuffer  之前

file 可以从 <input type='file'> 的属性上获取

如:

<input type='file' οnchange='openFile(event)' />

function openFile(event){

var input = event.target;

var reader = new FileReader();

reader.onload = function() {

// ......

}

reader.readerAsArrayBuffer(input.files[0]);

}

Blob 可以从 XMLHttpRequest 中获取

XMLHttpRequest 的 Response 对象取决于请求时 对 responseType 的 设置

responseType	response returns
'' (default)	Same as 'text'
'text'	String
'arraybuffer'	ArrayBuffer
'blob'	Blob
'document'	Document
'json'	Object

FileReader 的 result 可以有 3 种形式, 它取决于具体调用读取的方法

调用 reader.readAsArrayBuffer, 则 result 为 ArrayBuffer 对象

调用 reader.readAsText, 则 result 为 字符串

调用 reader.readAsDataURL, 则 result 为 DataURL, DataURL 可直接 赋值给 <img>.src

调试发现 DataURL 是带头信息(/image) 的 base64(可能是) 编码的字符串