上传的图片立即显示的JQ

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <title>立即显示上传的图片</title>  
  5. <meta charset="utf-8">  
  6.   
  7. <script type="text/javascript" src="//libs.useso.com/js/jquery/1.8.1/jquery.min.js"></script>  
  8. <script type="text/javascript">  
  9. $(function() {  
  10.     /*原理是把本地图片路径："D(盘符):/image/..."转为"http://..."格式路径来进行显示图片*/  
  11.     $("#fileupload").change(function() {  
  12.         var $file = $(this);  
  13.         var objUrl = $file[0].files[0];  
  14.         //获得一个http格式的url路径:mozilla(firefox)||webkit or chrome  
  15.         var windowURL = window.URL || window.webkitURL;  
  16.         //createObjectURL创建一个指向该参数对象(图片)的URL  
  17.         var dataURL;  
  18.         dataURL = windowURL.createObjectURL(objUrl);  
  19.         $("#imageview").attr("src",dataURL);  
  20.     });  
  21. });  
  22. </script>  
  23. </head>  
  24. <body>  
  25.     <input id="fileupload" type="file" />  
  26.     <img id="imageview" >  
  27. </body>  
  28. </html>  

posted on 2017-08-10 16:14  尼古拉斯.爱码仕  阅读(138)  评论(0)    收藏  举报

导航