js驗證上傳圖片副檔名型別程式碼例項

admin發表於2017-03-23
JS型別

本章節通過例項程式碼介紹一下如何驗證上面的圖片的副檔名型別，也就是圖片的型別，這個操作在很多應用中都有使用，希望能夠給需要的朋友帶來一定的幫助，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>     
<html>     
<head>     
<meta charset=" utf-8">     
<meta name="author" content="http://www.softwhy.com/" />     
<title>螞蟻部落</title>  
<script type="text/javascript"> 
function fucCheckJpgAndGif(strFileName){
  if(strFileName!= ""){
    var strtype=strFileName.substring(strFileName.length-4,strFileName.length);
    strtype=strtype.toLowerCase();
    if((strtype==".jpg")||(strtype==".gif")||(strtype=="jpeg")||(strtype==".bmp")){
      return true;
    }
    else{
      alert("請上傳jpg、gif或者bmp格式的圖片，謝謝！");
      return false;
    }
  }
}
window.onload=function(){
  var upload=document.getElementById("upload");
  upload.onchange=function(){
    fucCheckJpgAndGif(this.value);
  }
}
</script> 
</head> 
<body> 
<input type="file" id="upload"/>
</body> 
</html>

以上程式碼實現了我們的要求，選中上傳檔案之後就可以驗證檔案的型別了，下面介紹一下實現過程。

一.程式碼註釋:

1.function fucCheckJpgAndGif(strFileName){}，此函式實現驗證效果，引數是上傳空的value屬性值，也就是路徑。

2.if(strFileName!= ""){}，判斷引數值是否為空。

3.var strtype=strFileName.substring(strFileName.length-4,strFileName.length)，從檔名的倒數第四個開始擷取，一直到最後，也就是擷取包點(.)在內的字尾名。

4.strtype=strtype.toLowerCase()，轉換為小寫。

5.if((strtype==".jpg")||(strtype==".gif")||(strtype=="jpeg")||(strtype==".bmp")){return true;}，如果字尾屬於上面的幾項之一，那麼就通過驗證。

6.else{alert("請上傳jpg、gif或者bmp格式的圖片，謝謝！");return false;}，不通過就彈出提示。

二.相關閱讀:

1.substring()函式可以參閱javascript substring()一章節。

2.toLowerCase()函式可以參閱javascript toLowerCase()一章節。

3.onchange事件可以參閱javascript change 事件一章節。

相關文章