js 驗證上傳圖片大小及格式


 UpLoadFileCheck=function()
 {  
   this.AllowExt=".jpg,.gif";//允許上傳的文件類型 0爲無限制 每個擴展名後邊要加一個"," 小寫字母表示 
   this.AllowImgFileSize=0;//允許上傳文件的大小 0爲無限制 單位:KB 
   this.AllowImgWidth=0;//允許上傳的圖片的寬度 0爲無限制 單位:px(像素) 
   this.AllowImgHeight=0;//允許上傳的圖片的高度 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; 
  //this.HasChecked=false;  
  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該文件類型不允許上傳。請上傳 "+this.AllowExt+" 類型的文件,當前文件類型爲"+this.FileExt;   
   }
  } 
  if(this.ErrMsg!="") 
  {
   this.ShowMsg(this.ErrMsg,false); 
   return false;
  }
  else   
   return this.CheckProperty(obj);    
 }
 
 UpLoadFileCheck.prototype.CheckProperty=function(obj)
 {
  while(this.ImgObj.readyState!="complete")//
   { 
    sleep(1000);//一秒使用圖能完全加載    
   }   
   
  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的文件,當前圖片寬度爲"+this.ImgWidth+"px"; 
 
   if(this.AllowImgHeight!=0&&this.AllowImgHeight<this.ImgHeight) 
   this.ErrMsg=this.ErrMsg+"\n圖片高度超過限制。請上傳高度小於"+this.AllowImgHeight+"px的文件,當前圖片高度爲"+this.ImgHeight+"px";  
  }
 
  this.ImgFileSize=Math.round(this.ImgObj.fileSize/1024*100)/100;//取得圖片文件的大小  
alert(this.ImgFileSize);
  if(this.AllowImgFileSize!=0&&this.AllowImgFileSize<this.ImgFileSize) 
   this.ErrMsg=this.ErrMsg+"\n文件大小超過限制。請上傳小於"+this.AllowImgFileSize+"KB的文件,當前文件大小爲"+this.ImgFileSize+"KB"; 
 
  if(this.ErrMsg!="") 
  {
   this.ShowMsg(this.ErrMsg,false); 
   return false;
  }
  else 
   return true; 
 } 
 
 UpLoadFileCheck.prototype.ShowMsg=function(msg,tf)//顯示提示信息 tf=false 顯示錯誤信息 msg-信息內容 
 { 
  /*msg=msg.replace("\n","<li>"); 
  msg=msg.replace(/\n/gi,"<li>"); 
   */
  alert(msg);
 }
 function   sleep(num)   
   {   
    var   tempDate=new   Date();   
    var   tempStr="";   
    var   theXmlHttp   =   new   ActiveXObject(   "Microsoft.XMLHTTP"   );   
    while((new   Date()-tempDate)<num   )   
    {   
    tempStr+="\n"+(new   Date()-tempDate);   
    try{   
    theXmlHttp   .open(   "get",   "about:blank?JK="+Math.random(),   false   );   
    theXmlHttp   .send();   
    }   
    catch(e){;}   
    }   
   //containerDiv.innerText=tempStr;   
   return;   
   }  

 function c(obj)
 {
  var d=new UpLoadFileCheck(); 
  d.IsImg=true;
  d.AllowImgFileSize=20;
  d.CheckExt(obj)
 }
</script>

</head>

<body>
<input name="" type="file"   onChange="c(this)"/>

</body>
</html>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章