上传图片之前预览的效果（支持所有浏览器，包括IE6

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

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

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

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

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

[html] view plain copy

1.   

[javascript] view plain copy

1. // 获取本地上传的照片路径    
2. function getPath(obj) {    
3.           if (obj) {    
4.               //ie    
5.               if (window.navigator.userAgent.indexOf("MSIE") >= 1) {    
6.                   obj.select();    
7.                   // IE下取得图片的本地路径    
8.                   return document.selection.createRange().text;    
9.               }    
10.               //firefox    
11.               else if (window.navigator.userAgent.indexOf("Firefox") >= 1) {    
12.                   if (obj.files) {    
13.                       // Firefox下取得的是图片的数据    
14.                       return obj.files.item(0).getAsDataURL();    
15.                   }    
16.                   return obj.value;    
17.               }    
18.               return obj.value;    
19.           }    
20.       }    
21. //显示图片  
22.   
23. function previewPhoto(){    
24.     var picsrc=getPath(document.all.fileid);    
25.     var picpreview=document.getElementById("preview");    
26.     if(!picsrc){     
27.      return    
28.     }    
29.     if(window.navigator.userAgent.indexOf("MSIE") >= 1) {    
30.          if(picpreview) {    
31.           try{    
32.                  picpreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = picsrc;    
33.                 }catch(ex){    
34.            alert("文件路径非法，请重新选择！") ;    
35.            return false;    
36.           }    
37.      }else{     
38.         picpreview.innerHTML="<img src='"+picsrc+"' />";    
39.      }    
40.    }    
41. }    
42.   
43.   
44.   
45. function preImg(fileid, imgid) {  
46.     if (typeof FileReader == 'undefined') {  
47.         var picsrc=getPath(document.all.fileid)  
48.         $("#imgid").attr({ src: picsrc});  
49.         previewPhoto();  
50.     }  
51.     else{  
52.     var reader = new FileReader();  
53.     var name=$("#fileid").val();  
54.     var picpreview=document.getElementById("preview");    
55.     reader.onload = function(e) {  
56.         var img = document.getElementById(imgid);  
57.         //img.src = this.result;  
58.         picpreview.innerHTML="<img src='"+this.result+"' style='width: 179px; height: 189px;' />";    
59.     }  
60.     reader.readAsDataURL(document.getElementById(fileid).files[0]);  
61. }  
62. }  

[html] view plain copy

1. <div id="preview" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); width:180px;height:190px;border:solid 1px black;">    
2.   
3. lt;input type="file" id="fileid" name="photofile" onchange="preImg(this.id,'imgid');"/>  

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