js如何限定圖片上傳的型別

螞蟻小編發表於2017-03-16
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 checkImage()
{ 
  var filepath=document.getElementById("file").value; 
  if(filepath=="")
  { 
    alert("請選擇上傳的檔案！"); 
  } 
  else
  {
    var extname=filepath.substr(filepath.length-3,filepath.length); 
    if(extname!= "bmp" && extname!= "jpg" && extname!= "gif")
    { 
      alert("只能上傳bmp,jpg,gif格式的圖片！"); 
      document.getElementById("file").disabled=true; 
    } 
    else
    { 
      document.getElementById("file").disabled=false; 
    } 
  }
} 
</script> 
</head> 
<body> 
<input name="thefile" type="file" id="file" />
<button >點選上傳</button>
</body> 
</html>

以上程式碼實現了我們的要求，可以檢測上傳圖片的型別，當然這只是表單的一個片，在實際應用中，只要整合進去就可以了，下面就介紹一下此效果的實現過程。

一.實現原理:

原理特別的簡單，就是檢測圖片名稱的點(.)後面的字串是否在指定的格式之內，如果在就合格，否則不合格，這裡不多介紹了，具體看程式碼註釋。

二.程式碼註釋:

1.function checkImage(){}，宣告一個檢測圖片型別的函式。

2.var filepath=document.getElementById("file").value，獲取上傳控制元件中的路徑值。

3.if(filepath==""){ alert("請選擇上傳的檔案！"); } ，沒有沒有選擇上傳的檔案，那麼就提示為空。

4.var extname=filepath.substr(filepath.length-3,filepath.length)，擷取字串，也就是路徑字串的後三位字元，也就是圖片的格式（當然圖片的格式型別並非都是四位的）

5.if(extname!= "bmp" && extname!= "jpg" && extname!= "gif")，判斷是否是這幾種型別。

最好說明:

此程式碼只是演示一種思路，如需在實際中應用還是需要進行修改的。

相關文章