input file上传图片

jquery：

[javascript] view plain copy

1. //头像上传预览  
2.     $("#up").change(function() {  
3.         var $file = $(this);  
4.         var fileObj = $file[0];  
5.         var windowURL = window.URL || window.webkitURL;  
6.         var dataURL;  
7.         var $img = $("#ImgPr");  
8.         if(fileObj && fileObj.files && fileObj.files[0]){  
9.         dataURL = windowURL.createObjectURL(fileObj.files[0]);  
10.         $img.attr('src',dataURL);  
11.         }else{  
12.         dataURL = $file.val();  
13.         var imgObj = document.getElementById("ImgPr");  
14.         imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";  
15.         imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;  
16.             
17.         }  
18.     });  

html：

[html] view plain copy

1. <div class="picbtn"><img id="ImgPr" src="images/neik.png"</div>  
2. <a class="chooseimg" href="#"><input type="file" id="up">从手机相册中选择</a>  

js:

[javascript] view plain copy

1. function $$(obj) {  
2.     return document.getElementById(obj);  
3. }  
4. function upload(f){  
5.        
6.     var str = "";  
7.     for(var i=0;i<f.length;i++){  
8.         var reader = new FileReader();  
9.         reader.readAsDataURL(f[i]);  
10.         reader.onload = function(e){  
11.             str+="<img src='"+e.target.result+"'/>";  
12.             $$("dd").innerHTML = str;  
13.         }  
14.     }  
15.    
16. }  

html:

[html] view plain copy

1. <input id="load" type="file" onchange="upload(this.files)" multiple/>  
2. <div id="dd"></div>  

兼容ie6-9，FF

[html] view plain copy

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
2. <html xmlns="http://www.w3.org/1999/xhtml">  
3.         <body>  
4.                 <input type=file name="doc" id="doc" onchange="javascript:setImagePreview();">  
5. <p>  
6. <div id="localImag"><img id="preview" width=-1 height=-1 style="diplay:none" /></div>  
7. </p>  
8. <script>  
9. function setImagePreview() {  
10.         var docObj=document.getElementById("doc");  
11.    
12.         var imgObjPreview=document.getElementById("preview");  
13.                 if(docObj.files &&    docObj.files[0]){  
14.                         //火狐下，直接设img属性  
15.                         imgObjPreview.style.display = 'block';  
16.                         imgObjPreview.style.width = '300px';  
17.                         imgObjPreview.style.height = '120px';                      
18.                         //imgObjPreview.src = docObj.files[0].getAsDataURL();  
19.   
20.       //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式    
21.       imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);  
22.   
23.                 }else{  
24.                         //IE下，使用滤镜  
25.                         docObj.select();  
26.                         var imgSrc = document.selection.createRange().text;  
27.                         var localImagId = document.getElementById("localImag");  
28.                         //必须设置初始大小  
29.                         localImagId.style.width = "300px";  
30.                         localImagId.style.height = "120px";  
31.                         //图片异常的捕捉，防止用户修改后缀来伪造图片  
32. try{  
33.                                 localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";  
34.                                 localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;  
35.                         }catch(e){  
36.                                 alert("您上传的图片格式不正确，请重新选择!");  
37.                                 return false;  
38.                         }  
39.                         imgObjPreview.style.display = 'none';  
40.                         document.selection.empty();  
41.                 }  
42.                 return true;  
43.         }  
44. </script>  
45. </body>  
46. </html> 
    

声明：二次转载，未发现原著地址，请见谅！