這裡整理了一些網頁 <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>
