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

文章参考此站点应用，演示：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" onchange="preImg(this.id,'imgid');"/>

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