论坛首页 Web前端技术论坛

JavaScript验证上传图片

浏览 3672 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2009-11-01   最后修改:2010-08-24

可以对上传的图片的大小、长宽、格式等进行验证。

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
  <title>无标题文档</title> 
  <script> 
      UpLoadFileCheck=function() 
      {   
          this.AllowExt=".jpg,.gif,.bmp,.png";//允许上传的文件类型 0为无限制 
          this.AllowImgFileSize=0;//允许上传文件的大小 0为无限制 单位:KB 
          this.AllowImgWidth=300;//允许上传的图片的宽度 0为无限制 单位:px 
          this.AllowImgHeight=300;//允许上传的图片的高度 0为无限制 单位:px 
          this.ImgObj=new Image(); 
          this.ImgFileSize=0; 
          this.ImgWidth=0; 
          this.ImgHeight=0; 
          this.FileExt=""; 
          this.ErrMsg=""; 
          this.IsImg=false; 
     
      } 

      UpLoadFileCheck.prototype.CheckExt=function(obj) 
      { 
          this.ErrMsg=""; 
          this.ImgObj.src=obj.value;   
          if(obj.value=="") 
          { 
              this.ErrMsg="\n请选择一个文件";     
          } 
          else 
          {   
              this.FileExt=obj.value.substr(obj.value.lastIndexOf(".")).toLowerCase(); 
              if(this.AllowExt!=0&&this.AllowExt.indexOf(this.FileExt)==-1) 
              { 
                  this.ErrMsg="\n该文件类型不允许上传";   
              } 
          } 
          if(this.ErrMsg!="") 
          { 
              this.ShowMsg(this.ErrMsg,false); 
              return false; 
          } 
          else   
              return this.CheckProperty(obj);     
      } 

      UpLoadFileCheck.prototype.CheckProperty=function(obj) 
      {         
          if(this.IsImg==true) 
          { 
              this.ImgWidth=this.ImgObj.width; 
              this.ImgHeight=this.ImgObj.height; 
              if(this.AllowImgWidth!=0&&this.AllowImgWidth<this.ImgWidth) 
                  this.ErrMsg=this.ErrMsg+"\n图片宽度超过限制。请上传宽度小于"+this.AllowImgWidth+"px的文件"; 

              if(this.AllowImgHeight!=0&&this.AllowImgHeight<this.ImgHeight) 
                  this.ErrMsg=this.ErrMsg+"\n图片高度超过限制。请上传高度小于"+this.AllowImgHeight+"px的文件";   
          } 

          this.ImgFileSize=Math.round(this.ImgObj.fileSize/1024*100)/100; 
          if(this.AllowImgFileSize!=0&&this.AllowImgFileSize<this.ImgFileSize) 
              this.ErrMsg=this.ErrMsg+"\n文件大小超过限制。请上传小于"+this.AllowImgFileSize+"KB的文件"; 

          if(this.ErrMsg!="") 
          { 
              this.ShowMsg(this.ErrMsg,false); 
              return false; 
          } 
          else 
              return true; 
      } 

      UpLoadFileCheck.prototype.ShowMsg=function(msg,tf) 
      { 
          alert(msg); 
      } 
     
      function c(obj) 
      { 
          var d=new UpLoadFileCheck(); 
          d.IsImg=true; 
          d.AllowImgFileSize=100; 
          d.CheckExt(obj) 
      } 
  </script> 
</head> 
<body> 
  <input name="" type="file"   onchange="c(this)"/> 
</body> 
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics