利用FileReader实现图片上传预览

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

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;
  }