2208月
【教學文章】input 使用 accept 限制上傳檔案類型
網頁表單的 <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>