浏览器图片预览

一、场景：用户在上传图片时，需预览图片显示，后点击提交时，才上传图片至服务器。

二、图片预览的解决方法：

 var file = $("#fileId");    //fileId为type=file的input id值

file.select();

var isIE = navigator.userAgent.match(/MSIE/)!= null,

if(isIE){

      $("#id").focus(); //id为页面某div或者button的id，但是绝对不能是input的id，如果是input的id那么图片无法预览显示。

     var imgSrc = document.selection.createRange().text;

      if (isIE6) {
 
            pic.src = imgSrc;
 
         }else {
            // 非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片，但是可以通过滤镜来实现
 
             pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src=\"" + imgSrc + "\");" +
               "FILTER:Alpha(Opacity='0'); height='155px'; width='197px'";
 
             // 设置img的src为base64编码的透明图片 取消显示浏览器默认图片
 
             pic.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';
 
         }

}else{

       var file = file.files[0];
 
      var reader = new FileReader();
 
      reader.readAsDataURL(file);
 
      reader.onload = function(e){
 
            var pic = document.getElementById("preview");
 
            pic.src=this.result;
 
     }

}