網頁 input 使用 accept 限制上傳檔案類型

這裡整理了一些網頁 <input> 上傳檔案時，使用 accept 限制上傳檔案類型的用法與範例。

網頁表單的 <input> 可以用來上傳檔案，如果想要限制使用者只能上傳某些特定的檔案類型，可以使用 accept 屬性來調整可接受的檔案類型。

指定副檔名

accept 可以使用副檔名來指定可接受的檔案類型，例如只接受 *.csv 的逗點分隔檔案：

<input type="file" accept=".csv" />

只接受 PDF 檔案：

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

若可接受多種副檔名，則使用逗號分隔不同的副檔名，例如接受 *.csv 與 *.xls 兩種檔案格式：

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

指定網際網路媒體型式

accept 亦可使用網際網路媒體型式（media type）來指定可接受的檔案類型。例如只接受影像圖檔（包含 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/*" />

使用逗號分隔多種檔案格式，只接受網頁、*.txt 與 *.csv 檔：

<input type="file" accept="text/html,.txt,.csv" />

以 JavaScript 檢查副檔名

除了使用 <input> 的 accept 之外，也可以使用 JavaScript 來檢查副檔名。

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

  // 可接受的附檔名
  var validExts = new Array(".xlsx", ".xls", ".csv");

  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 函數，在網頁中加入這段 JavaScript 程式碼之後，接著在需要檢查檔案類型的 <input> 中設定 onchange 事件處理程式。

<form method="post" enctype="multipart/form-data">
  <input type="file" name="my_file" onchange="checkfile(this);" />
  <input type="submit" value="Upload">
</form>

參考資料：StackOverflow