预览图片代码

Posted 辣牛

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了预览图片代码相关的知识,希望对你有一定的参考价值。

 1 <!DOCTYPE html> 
 2 <html>  
 3 <head>  
 4 <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>  
 5 <script type="text/javascript">  
 6     $(function(){  
 7         function getObjectURL(file){    
 8             var url=null     
 9             if(window.createObjectURL!=undefined){ // basic    
10                 url=window.createObjectURL(file)    
11             }else if(window.URL!=undefined){ // mozilla(firefox)    
12                 url=window.URL.createObjectURL(file)    
13             } else if(window.webkitURL!=undefined){ // webkit or chrome    
14                 url=window.webkitURL.createObjectURL(file)    
15             }    
16             return url;  
17         }    
18         $("#face_upload").change(function(){ 
19             var objUrl=getObjectURL(this.files[0]); 
20             var size=this.files[0].size;    
21             if(size>=1024000*10)bottomTip("图片超过10M了哦",0);    
22             else{    
23                  if(objUrl){    
24                         $("#xs").attr("src",objUrl);  
25                     }    
26             }     
27         })  ;  
28     })  
29 </script>  
30 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
31 <title>Insert title here</title>  
32 </head>  
33 <body>  
34     <form  enctype="multipart/form-data">  
35         商品图片 <input type="file" id="face_upload"/><br>  
36         <img src="" height="200" width="200" id="xs"/>  
37     </form>  
38 </body>  
39 </html>

 效果如下:

 

以上是关于预览图片代码的主要内容,如果未能解决你的问题,请参考以下文章

jquery实现上传图片及图片大小验证图片预览效果代码

图片预加载

9行代码实现图片上传和预览(自定义按钮上传)

预览图片代码

9行代码实现图片上传和预览(自定义按钮上传)

根据图片的url地址下载图片到本地保存代码片段