关于Javascript 中的 FileReader, XMLHttpRequest, Blob, ArrayBuffer, DataURL 等
FileReader 用于读取 Blob 和 File
Blob 是 HTML 中内嵌对象的媒体数据, 如Jpeg文件内容
File 就是 HTML 中 的文件
如:
var reader = new FileReader();
reader.readerAsArrayBuffer ( fileOrBlob );
当 reader 真正加载数时, 会调用 reader.onload 这个回调函数
reader.onload = function(){
var buffer = reader.result;// 这时才能取 result 的值
Console.log(buffer.byteLength);
};// 注: 回调函数的设定应该在调用 readerAsArrayBuffer 之前
file 可以从 的属性上获取
如:
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 可直接 赋值给 .src
调试发现 DataURL 是带头信息(/image) 的 base64(可能是) 编码的字符串