共享网

上传图片时JS自动显示图片
2010-7-21 18:34:34 文章来源: http://www.chr114.com 文章作者: chr114 点击率:
核心提示: 上传图片时JS自动显示图片
JavaScript代码
  1. <HTML>   
  2. <META http-equiv=Content-Type content="text/html; charset=utf-8">   
  3. <HEAD>   
  4. <TITLE> Test Page </TITLE>   
  5.   
  6. </HEAD>   
  7.   
  8. <BODY>   
  9. <script>   
  10. function preview(imgFile,num)   
  11. {   
  12.     //预览代码，支持 IE6、IE7。   
  13.     var newPreview = document.getElementById("preview1");   
  14.      
  15.     var t ;   
  16.     if(document.all) //IE   
  17.      t = imgFile.value;   
  18.     else  
  19.      t = imgFile.files[0].getAsDataURL(); //FF   
  20.      newPreview.style.backgroundImage = "url(" + t + ")";//imgFile.value;   
  21.      newPreview.style.width = "108px";   
  22.      newPreview.style.height = "130px";   
  23.      newPreview.style.display = "block";   
  24. }   
  25.   
  26. </script>   
  27. <input type="file" onchange='ShowImg(this)' />   
  28.   
  29. <div id="preview1" style="border:1px solid #FFCC00; width:108px; height:130px;display:block" >   
  30.   
  31. </div>   
  32. <script>function ShowImg(o)   
  33. {     
  34. //var Browser_Agent=navigator.userAgent;   
  35. //if(Browser_Agent.indexOf("Firefox")!=-1)   
  36. //{   
  37. //火狐使用   
  38.   //   document.getElementById("idImg").src=o.files[0].getAsDataURL();   
  39.   //   document.getElementById("idImg").style.display = "block";   
  40.   // }   
  41. //else   
  42. //{   
  43.        preview(o,1);   
  44.     //}   
  45. } </script>   
  46.   
  47.   
  48. </BODY>   
  49. </HTML>   

 

分享到：

欢迎访问编程之路，请在评论时遵守国家相关法律法规。评论不代表本站观点

  • 访客名称:

推荐文章

热门文章

精彩广告

2010 编程之路 www.chr114.com All Rights Reserved