共享网

JS实时预览上传图片缩略图
2010-7-21 18:58:41 文章来源: http://www.chr114.com 文章作者: chr114 点击率:
核心提示: 上传图片时JS自动显示图片

实现代码一：

XML/HTML代码
  1. <script language=JavaScript>  
  2. var flag=false;   
  3. function DrawImage(ImgD){   
  4.    var image=new Image();   
  5.    image.src=ImgD.src;   
  6.    if(image.width>0 && image.height>0){   
  7.     flag=true;   
  8.     if(image.width/image.height>= 120/80){   
  9.      if(image.width>120){     
  10.      ImgD.width=120;   
  11.      ImgD.height=(image.height*120)/image.width;   
  12.      }else{   
  13.      ImgD.width=image.width;     
  14.      ImgD.height=image.height;   
  15.      }   
  16.      ImgD.alt=image.width+"×"+image.height;   
  17.      }   
  18.     else{   
  19.      if(image.height>80){     
  20.      ImgD.height=80;   
  21.      ImgD.width=(image.width*80)/image.height;        
  22.      }else{   
  23.      ImgD.width=image.width;     
  24.      ImgD.height=image.height;   
  25.      }   
  26.      ImgD.alt=image.width+"×"+image.height;   
  27.      }   
  28.     }   
  29.    /**//**//**//*else{   
  30.     ImgD.src="";   
  31.     ImgD.alt=""  
  32.     }*/   
  33.    }    
  34.   
  35. function FileChange(Value){   
  36. flag=false;   
  37. document.all.uploadimage.width=10;   
  38. document.all.uploadimage.height=10;   
  39. document.all.uploadimage.alt="";   
  40. document.all.uploadimage.src=Value;   
  41. }   
  42.   
  43. function BeforeUpLoad(){   
  44. if(flag) alert("OK");else alert("FAIL");   
  45. }   
  46. </script>  
  47. <INPUT style="WIDTH: 143px; HEIGHT: 18px" type=file size=8 name=pic onchange="javascript:FileChange(this.value);">    
  48. <IMG id=uploadimage height=10 width=10 src=""  onload="javascript:DrawImage(this);" ><BR>  
  49. <Button onclick="javascript:BeforeUpLoad();">提交</Button>  

 

实现代码二：
 

XML/HTML代码
  1. <input id="file" type="file" onfocus="javascript:ShowImage(this.value,document.getElementById('img'))">  
  2. <br />  
  3. <img id="img"  STYLE="visibility:hidden" height="100px" width="100px">  
  4.   
  5. <script language="javascript" type="text/javascript">  
  6.        
  7.      function ShowImage(value,img)   
  8.     {   
  9.             //alert(value);   
  10.             //检测盘符   
  11.             //alert(value.indexOf(':'));   
  12.             //检测文件是否有扩展名   
  13.             //alert(value.length-value.lastIndexOf('.'));   
  14.             //取文件扩展名   
  15.             //alert(value.substr(value.length-3,3));   
  16.             //检测文件扩展名是否合法   
  17.             //alert(CheckExt(value.substr(value.length-3,3)));   
  18.                
  19.         if(value.length>5&&value.indexOf(':')==1&&        (value.length-value.lastIndexOf('.'))==4&&CheckExt(value.substr(value.length-3,3)))   
  20.         {   
  21.             img.src=value;   
  22.             img.alt="本地图片预览";   
  23.             img.style.visibility="visible";   
  24.         }   
  25.         else   
  26.         {   
  27.                     img.style.visibility="hidden";   
  28.               }   
  29.     }   
  30.     //检查扩展名是否合法,合法返回True   
  31.     function CheckExt(ext)   
  32.     {   
  33.         //这里设置允许的扩展名   
  34.         var AllowExt="jpg|gif|jpeg|png|bmp";   
  35.         var ExtOK=false;   
  36.             var ArrayExt;   
  37.             if(AllowExt.indexOf('|')!=-1)   
  38.             {   
  39.                 ArrayExt=AllowExt.split('|');   
  40.                 for(i=0;i<ArrayExt.length;i++)   
  41.                 {   
  42.                     if(ext.toLowerCase()==ArrayExt[i])   
  43.                     {   
  44.                         ExtOK=true;   
  45.                         break;   
  46.                     }   
  47.                 }   
  48.             }   
  49.             else   
  50.             {   
  51.                 ArrayExt=AllowExt;   
  52.                 if(ext.toLowerCase()==ArrayExt)   
  53.                 {   
  54.                     ExtOK=true;   
  55.                 }   
  56.             }   
  57.             return ExtOK;   
  58.     }   
  59. </script>  

 

分享到：

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

  • 访客名称:

推荐文章

热门文章

精彩广告

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