立即显示上传的图片

Posted on Posted in js
Tips: 本文创建于2014年7月4日,已超过 2 年,内容或图片可能已经失效!

功能实例
上传图片立即显示

  1. <html>    
  2. <head>    
  3. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">  
  4. <style>  
  5.     #photo{ width:100px; height:100px; margin:auto; margin-top:100px; background:#0cc; border-radius:100px;}  
  6.     #photo img{ width:100px; height:100px; border-radius:50px;}  
  7. </style>  
  8. </head>    
  9.     
  10. <body>    
  11. <!--图片:<input type="file" id="img" name="pic" onChange="showpic()" />    
  12. <br />    
  13. <img src="" alt="" /> -->  
  14.   
  15.   
  16. <input id="img" type="file" accept="image/*" />   
  17. <div id="photo"></div>  
  18.   
  19. <script src="http://www.sucaihuo.com/jquery/2/292/demo/js/jquery.min.js"></script>  
  20. <script type="text/javascript">    
  21. /*function showpic(){    
  22.   // html5 获得客户端信息    
  23.   var pic = document.getElementById("img").files[0];    
  24.   var ss = window.URL.createObjectURL(pic);    
  25.   document.getElementsByTagName('img')[0].src = ss;    
  26. }  */  
  27.   
  28. $(function() {   
  29.     $('#img').change(function() {   
  30.         var file = this.files[0];   
  31.         var r = new FileReader();   
  32.         r.readAsDataURL(file);   
  33.         $(r).load(function() {   
  34.             $('#photo').html('<img src="' + this.result + '" alt="" />');   
  35.         })   
  36.     })   
  37. })  
  38. </script>    
  39. </body>    
  40. </html>    
» 转载请注明来源:呢喃 » 立即显示上传的图片

Leave a Reply

Your email address will not be published. Required fields are marked *

twelve − two =