FileReader用来把文件读入内存中。此接口提供了异步api使得浏览器能异步访问文件，读取文件内容。为html5特性，ie可用filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=fileIpt.value)进行兼容。
FileReader提供的接口
- readAsBinaryString ：以二进制的形式读取 参数为file
- readAsText ：以文本形式读取 参数为file，[encoding]
- readAsDataURL：将文件读取为dataurl 参数为file
- abort： 终止读取 无参数
这些接口都无返回值 读取结果保存在this.result中
接口事件
- onabort：中断
- onerror：出错
- onloadstart：开始
- onprogress：进行
- onload：成功
- onloadend：完成，无论成功失败
经测试，各状态中的this属性一致 不同之处在于 readyState result
使用实例
1.html
<input type="file" id="file" />
<div id="preview"></div>
2.script
function $(selector){ return document.querySelectorAll(selector) };
function showPre()
{
var file = this.files[0];
if(!file) return;
if(!checktype(file)) return;
/* 各种验证 略 **/
var reader = new FileReader;
reader.readAsDataURL(file);
reader.onload = function()
{
$('#preview').innerHTML = '<\img src=" '+ this.result +'"/>';
}
reader.onerror = function()
{
/* error handler **/
}
}
$('#file')[0].onchange = showPre;
3.坑( 划重点 )
fileinput 当选择文件跟上次选择文件相同时 不会触发onchange事件 即不能上传两个相同的文件 需要在file使用后重置
function clearFileIpt(ipt, event)
{
var id = ipt.id;
ipt.outerHTML = ipt.outerHTML;
/* 另一个坑 需要重新选择ipt且绑定事件 **/
$(#+'id')[0].onchange = event;
}
