上传图片之前预览的效果（支持所有浏览器，包括IE6-8,chrome,opera,firefox等）

本文链接：https://blog.csdn.net/kobeguang/article/details/7770255

文章参考此站点应用，演示：http://www.ibisai.com.cn/

今天在做一个考试系统，需要上传证件照，在选取了文件之后，需要首先预览一下。也就是在没有上传前先预览。

这个最让人头痛的就是兼容各种浏览器，往往IE的可以了，其他的浏览器又不行，经过大半天的尝试，终于能够通过所有浏览器。以下是相应的js代码：

注意，所有的js文件只有两个是外部接口，也就是两个id，分别是上传控件<input type="file">的id为fileid，还有<div>的id为preview，此来显示图片。

最后应用到自己的项目时，只需在以下js代码里改掉这两个id为自己的id即可。

// 获取本地上传的照片路径  
function getPath(obj) {  
          if (obj) {  
              //ie  
              if (window.navigator.userAgent.indexOf("MSIE") >= 1) {  
                  obj.select();  
                  // IE下取得图片的本地路径  
                  return document.selection.createRange().text;  
              }  
              //firefox  
              else if (window.navigator.userAgent.indexOf("Firefox") >= 1) {  
                  if (obj.files) {  
                      // Firefox下取得的是图片的数据  
                      return obj.files.item(0).getAsDataURL();  
                  }  
                  return obj.value;  
              }  
              return obj.value;  
          }  
      }  
//显示图片

function previewPhoto(){  
    var picsrc=getPath(document.all.fileid);  
    var picpreview=document.getElementById("preview");  
    if(!picsrc){   
     return  
    }  
    if(window.navigator.userAgent.indexOf("MSIE") >= 1) {  
         if(picpreview) {  
          try{  
                 picpreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = picsrc;  
                }catch(ex){  
           alert("文件路径非法，请重新选择！") ;  
           return false;  
          }  
     }else{   
        picpreview.innerHTML="<img src='"+picsrc+"' />";  
     }  
   }  
}  



function preImg(fileid, imgid) {
	if (typeof FileReader == 'undefined') {
		var picsrc=getPath(document.all.fileid)
		$("#imgid").attr({ src: picsrc});
		previewPhoto();
	}
	else{
	var reader = new FileReader();
	var name=$("#fileid").val();
	var picpreview=document.getElementById("preview");  
	reader.onload = function(e) {
		var img = document.getElementById(imgid);
		//img.src = this.result;
		picpreview.innerHTML="<img src='"+this.result+"' style='width: 179px; height: 189px;' />";  
	}
	reader.readAsDataURL(document.getElementById(fileid).files[0]);
}
}

 <div id="preview" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); width:180px;height:190px;border:solid 1px black;">  

<input type="file" id="fileid" name="photofile" οnchange="preImg(this.id,'imgid');"/>

不能合理的运行，可以给我留言。