您现在的位置: 365建站网 > 365文章 > 图片上传即时显示缩略图解决方法

图片上传即时显示缩略图解决方法

文章来源:365jz.com     点击数:835    更新时间:2009-09-14 10:28   参与评论

图片上传即时显示缩略图解决方法(出自高手“风雪之隅” )

 

 

</>code

  1. <script language="javascript" type="text/javascript">
  2. var allowExt = ['jpg', 'gif', 'bmp', 'png', 'jpeg'];
  3. var preivew = function(file, container){
  4. try{
  5. var pic = new Picture(file, container);
  6. }catch(e){
  7. alert(e);
  8. }
  9. }
  10. //缩略图类定义
    var Picture = function(file, container){
  11. var height
  12. = 0,
  13. widht
  14. = 0,
  15. ext
  16. = '',
  17. size
  18. = 0,
  19. name = '',
  20. path
  21. = '';
  22. var self
  23. = this;
  24. if(file){
  25. name = file.value;
  26. if (window.navigator.userAgent.indexOf("MSIE")>=1){
  27. file.select();
  28. path = document.selection.createRange().text;
  29. }else if(window.navigator.userAgent.indexOf("Firefox")>=1){
  30. if(file.files){
  31. path = file.files.item(0).getAsDataURL();
  32. }else{
  33. path = file.value;
  34. }
  35. }
  36. }else{
  37. throw "bad file";
  38. }


  39. ext = name.substr(name.lastIndexOf("."), name.length);

  40. if(container.tagName.toLowerCase() != 'img'){
  41. throw "container is not a valid img label";
  42. container.visibility = 'hidden';
  43. }
  44. container.src = path;
  45. container.alt = name;
  46. container.style.visibility = 'visible';
  47. height = container.height;
  48. widht = container.widht;
  49. size = container.fileSize;


  50. this.get = function(name){
  51. return self[name];
  52. }

  53. this.isValid = function(){
  54. if(allowExt.indexOf(self.ext) !== -1){
  55. throw 'the ext is not allowed to upload';
  56. return false;
  57. }
  58. }
  59. }
    </script>

 

 

</>code

  1. <div class='previewDemo'>
  2. <input id="file" type="file" onchange="preivew(this, document.getElementById('img'));">
  3. <img id="img" style="visibility:hidden" height="100px" width="100px">
    </div>

 

Tag标签: js,js缩略图

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛

发表评论 (835人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
昵称:
最新评论
------分隔线----------------------------

快速入口

· 365软件
· 杰创官网
· 建站工具
· 网站大全

其它栏目

· 建站教程
· 365学习

业务咨询

· 技术支持
· 服务时间:9:00-18:00
365建站网二维码

Powered by 365建站网 RSS地图 HTML地图

copyright © 2013-2024 版权所有 鄂ICP备17013400号