夏日博客

A-A+

javascript预览本地图片程序代码

2016年10月14日 前端设计 暂无评论 阅读 4 views 次

上传图片时我们在图片未上传之前就可以预览用户选择的图片了，下面我来介绍几段常用的预览本地图片程序代码。

图片上传预览是一种在图片上传之前对图片进行本地预览的技术,使用户选择图片后能立即查看图片，而不需上传服务器，提高用户体验,但随着浏览器安全性的提高，要实现图片上传预览也越来越困难。

不过群众的智慧是无限的，网上已经有很多变通或先进的方法来实现,例如ie7/ie8的滤镜预览法，firefox 3的getAsDataURL方法,但在opera、safari和chrome还是没有办法实现本地预览，只能通过后台来支持预览,代码如下:

  1. <style type="text/css">  
  2. #newPreview  
  3. {  
  4.      filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);  
  5. }  
  6. .style1  
  7. {  
  8.   width: 507px;  
  9. }  
  10. </style>  
  11. </head>  
  12. <script language="javascript" type="text/javascript">  
  13.  function PreviewImg(imgFile)   
  14. {  
  15.     var newPreview = document.getElementById("newPreview");  
  16.     newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value;  
  17.     newPreview.style.width = "158px";  
  18.     newPreview.style.height = "180px";  
  19. }  
  20. </script>  
  21. <div id="newPreview"></div>  
  22. <asp:FileUpload ID="FileUpload1" onchange="PreviewImg(this)" runat="server" Width="408px" />  

在 IE6 中，可以很方便地利用 img 的 src 属性，实现本地图片预览，然而在 IE7 中，这种办法却行不通,下面来一段兼容性比较强的代码,代码如下:

  1. <script language="javascript">  
  2.      var isIE = false;  
  3.      var isFF = false;  
  4.      var isSa = false;  
  5.      if((navigator.userAgent.indexOf("MSIE")>0) && (parseInt(navigator.appVersion) >=4))isIE = true;  
  6.      if(navigator.userAgent.indexOf("Firefox")>0)isFF = true;  
  7.      if(navigator.userAgent.indexOf("Safari")>0)isSa = true;   
  8.        
  9.       function fileChange(obj)  
  10.       {   
  11.          if(isIE)  
  12.          {  
  13.             var url = obj.value;   
  14.             url = "file:///" + url.replace("\",'/');  
  15.                          
  16.          } 
  17.          else if(isFF) 
  18.          { 
  19.              var url = obj.files.item(0).getAsDataURL(); 
  20.               
  21.          } 
  22.          document.getElementById("ImageFile").src= url;  
  23.       } //xiariboke.net 
  24.       
  25.     </script> 
  26. <asp:FileUpload id=FileUpload1 onchange="fileChange(this);" runat="server"></asp:FileUpload><asp:Image id=ImageFile runat="server"></asp:Image>  

明明IE和火狐都正常的代码，这个小不点的chrome浏览器非要跳出来不兼容你的代码。请无视google吧。

firefox使用了getAsDataURL方法，而IE是用了滤镜,代码如下:

  1. <input type=file name="doc" id="doc" onchange="javascript:setImagePreview();">  
  2. <p>  
  3. <div id="localImag"><img id="preview" width=-1 height=-1 style="diplay:none" /></div>  
  4. </p>  
  5. <script>  
  6. function setImagePreview() {  
  7.     var docObj=document.getElementById("doc");  
  8.     var fileName = docObj.value;  
  9.     var imgObjPreview=document.getElementById("preview");  
  10.         if(docObj.files &&  docObj.files[0]){  
  11.             //火狐下，直接设img属性  
  12.             imgObjPreview.style.display = 'block';  
  13.             imgObjPreview.style.width = '150px';  
  14.             imgObjPreview.style.height = '120px';             
  15.             imgObjPreview.src = docObj.files[0].getAsDataURL();  
  16.         }else{  
  17.             //IE下，使用滤镜  
  18.             docObj.select();  
  19.             var imgSrc = document.selection.createRange().text;  
  20.             var localImagId = document.getElementById("localImag");  
  21.             //必须设置初始大小  
  22.             localImagId.style.width = "150px";  
  23.             localImagId.style.height = "120px";  
  24.             //图片异常的捕捉，防止用户修改后缀来伪造图片  
  25.             try{  
  26.                 localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";  
  27.                 localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;  
  28.             }catch(e){  
  29.                 alert("您上传的图片格式不正确，请重新选择!");  
  30.                 return false;  
  31.             }  
  32.             imgObjPreview.style.display = 'none';  
  33.             document.selection.empty();  
  34.         }  
  35.         return true;  
  36.     }  
  37. </script>  
标签：

给我留言