網頁 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

網頁開發

2 Comments

  1. Tom

    請問您文章上面所使用的HTML Syntax Highlighter是那一款呢?

    • G. T. Wang

      我的文章並沒有使用 HTML Syntax Highlighter,是使用 Vim 轉的。

Leave a Reply