javascript圖片上傳格式尺寸等特徵驗證效果

antzone發表於2017-04-08
JavaScript特徵

本章節分享一段程式碼例項，它實現了驗證圖片上傳格式或者尺寸等特性的功能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
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){
    if(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;
    //取得圖片檔案的大小 
    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; 
  } 
  //顯示提示資訊 tf=false 顯示錯誤資訊 msg-資訊內容
  UpLoadFileCheck.prototype.ShowMsg=function(msg,tf){ 
    /*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=100;
   d.CheckExt(obj)
 }
</script>
</head>
<body>
<input name="" type="file" onchange="c(this)"/>
</body>
</html>

相關文章