js图片预览

最新推荐文章于 2024-06-20 10:53:59 发布

FYM_91

最新推荐文章于 2024-06-20 10:53:59 发布

阅读量173

点赞数

本文链接：https://blog.csdn.net/sinat_33388558/article/details/53943773

版权

 
         <!DOCTYPE html PUBLIC  
         "-//W3C//DTD XHTML 1.0 Transitional//EN" 
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" 
         >  
        
         <html xmlns= 
         "http://www.w3.org/1999/xhtml" 
         >  
        
         <head>  
        
         <meta http-equiv= 
         "Content-Type" 
         content= 
         "text/html; charset=utf-8" 
         />  
        
         <title>By：DragonDean</title>  
        
         <script type= 
         "text/javascript" 
         >  
        
         //下面用于图片上传预览功能  
        
         function 
          setImagePreview(avalue) {  
        
         var 
          docObj=document.getElementById( 
         "doc" 
         );  
        
         var 
          imgObjPreview=document.getElementById( 
         "preview" 
         );  
        
         if 
         (docObj.files &&docObj.files[0])  
        
         {  
        
         //火狐下，直接设img属性  
        
         imgObjPreview.style.display =  
         'block' 
         ;  
        
         imgObjPreview.style.width =  
         '150px' 
         ;  
        
         imgObjPreview.style.height =  
         '180px' 
         ;   
        
         //imgObjPreview.src = docObj.files[0].getAsDataURL();  
        
         //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式  
        
         imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);  
        
         }  
        
         else 
        
         {  
        
         //IE下，使用滤镜  
        
         docObj.select();  
        
         var 
          imgSrc = document.selection.createRange().text;  
        
         var 
          localImagId = document.getElementById( 
         "localImag" 
         );  
        
         //必须设置初始大小  
        
         localImagId.style.width =  
         "150px" 
         ;  
        
         localImagId.style.height =  
         "180px" 
         ;  
        
         //图片异常的捕捉，防止用户修改后缀来伪造图片  
        
         try 
         {  
        
         localImagId.style.filter= 
         "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)" 
         ;  
        
         localImagId.filters.item( 
         "DXImageTransform.Microsoft.AlphaImageLoader" 
         ).src = imgSrc;  
        
         }  
        
         catch 
         (e)  
        
         {  
        
         alert( 
         "您上传的图片格式不正确，请重新选择!" 
         );  
        
         return 
          false 
         ;  
        
         }  
        
         imgObjPreview.style.display =  
         'none' 
         ;  
        
         document.selection.empty();  
        
         }  
        
         return 
          true 
         ;  
        
         }  
        
         </script>  
        
         </head>  
        
         <body>  
        
         <table width= 
         "100%" 
         border= 
         "0" 
          cellspacing= 
         "0" 
         cellpadding= 
         "0" 
         >  
        
         <tbody>  
        
         <tr>  
        
         <td height= 
         "101" 
         align= 
         "center" 
         >  
        
         <div id= 
         "localImag" 
         ><img id= 
         "preview" 
         src= 
         "" 
          width= 
         "150" 
         height= 
         "180" 
         style= 
         "display: block; width: 150px; height: 180px;" 
         ></div>  
        
         </td>  
        
         </tr>  
        
         <tr>  
        
         <td align= 
         "center" 
         style= 
         "padding-top:10px;" 
         ><input type= 
         "file" 
         name= 
         "file" 
          id= 
         "doc" 
         style= 
         "width:150px;" 
         onchange= 
         "javascript:setImagePreview();" 
         ></td>  
        
         </tr>  
        
         </tbody>  
        
         </table>  
        
         </body>  
        
         </html>

FYM_91

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js图片预览

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">"http://www.w3.org/1999/xhtml"> "Content-Type"content="text/html
复制链接

扫一扫