網頁表單的 <input> 可以用來上傳檔案，但是要怎麼限制使用者只能上傳指定的檔案類型呢？這次我們來學學使用 accept 屬性選擇可接受的檔案類型。

1. 指定副檔名

accept 可以用副檔名來指定可接受的檔案類型，例如只接受 .pdf 的檔案：

<input type="file" accept=".pdf" />​

如果要可接受多種副檔名，則須使用逗號分開，例如只接受 .pdf 與 .xls 兩種檔案格式：

<input type="file" accept=".pdf,.xls" />​

2. 指定網路媒體形式

accept 亦可使用網路媒體形式來指定檔案類型，例如只接受影像圖檔（包含 .jpg、.png、.gif 等圖檔）：

<input type="file" accept="image/*" />​

只接受網頁檔（.htm 與 .html 等網頁檔）：

<input type="file" accept="text/html" />​

只接受影片檔（包含 .avi、.mp4、.mpg 等影片檔）：

<input type="file" accept="video/*" />​

只接受聲音檔（包含 .mp3、.wav 等聲音檔）：

<input type="file" accept="audio/*" />​

也可使用逗號分隔多種檔案格式，例如只接受圖檔、.pdf 與 .xls 檔：

<input type="file" accept="image/*,.pdf,.xls" />​

使用 JavaScript 檢查副檔名

除了 accept 以外，也能使用 JavaScript 來檢查副檔名。

<script type="text/javascript" language="javascript">
function checkfile(sender) {

  // 可接受的附檔名
  var validExts = new Array(".jpg", ".png", ".gif");

  var fileExt = sender.value;
  fileExt = fileExt.substring(fileExt.lastIndexOf('.'));
  if (validExts.indexOf(fileExt) < 0) {
    alert("檔案類型錯誤，可接受的副檔名有：" + validExts.toString());
    sender.value = null;
    return false;
  }
  else return true;
}
</script>

這段 JavaScript 定義了一個用來檢查副檔名的 checkfile 函數，在網頁中加入這段程式碼接著在需要檢查檔案類型的 <input /> 中設定 onchange 事件處理程式。

<form method="post">
  <input type="file" onchange="checkfile(this);" />
  <input type="submit">
</form>​