HTML input type=”file” 該怎麼指定檔案類型

起因

相信各位在使用 input type=”file” 處理上傳檔案時,常常需要限制檔案的類型吧

像是我在寫圖片轉檔測試功能時,就希望上傳的檔案限定在圖片類型就好

那這時候該怎麼處理呢,這時候就需要「accept」這個屬性了

accept 屬性

主要用處就是可以限制檔案的類型

支援許多常見的屬性 :

  • 可以使用常見的MIME類型,image/* 、video/* 、text/* …等
  • image/* ➡ 支援所有圖片類型,包括 png、jpeg、gif … 等
  • 另外也可以針對具體副檔名來進行限制,像是 .png、 .doc …等等

⭐若有多個檔案類型需要判斷,擇要用「,」隔開 (下面範例有)

使用範例如下 :

See the Pen input_file_accept by story zyra (@story-zyra) on CodePen.

⬆️這裡是我寫的範例,大家可以自己按按看,可以看到右下角變成了「自訂檔案」,就會指定對應的類型

注意事項

儘管在不同的瀏覽器中可能有不同的效果

但大多數的瀏覽器其實只是給了一個預設的類型限制,其實使用者還是可以切換來選擇其他類型

像是剛剛的範例,除了「自訂檔案」外,切換回所有檔案又可以選擇其他類型了

該怎麼解決

那遇上這個問題,就不能指望HTML屬性幫忙解決了

必須用JS協助或是在後端執行驗證,這邊簡單寫一個JS檢核的範例

See the Pen input_file_accept by story zyra (@story-zyra) on CodePen.

在這個範例中,在上傳這個input value改變時(也就是選擇檔案上傳時)會觸發檢核函式 – checkfiletype

這裡用了 split 針對「.」來切割 ,並用 pop 取出陣列中最後一個元素,也就是我們要的檔案類型

然後若不符合,則會跳出提醒,並將內容清除


結論

accept 這個屬性比較像是協助顯示預設,而非真正的檢核功能

有這個屬性,可以讓使用者快速的過濾掉很多不要的檔案

像是功能是上傳文件,那可能就可以設為 【.doc,.docx,.pdf】 之類的

不過就像文章中提到的一樣,檢核機制還是必須的,不管是用範例這種JS檢核亦或是後端判斷都一樣

參考文章 :

🧡如果這篇文章有提供一點幫助,那很棒,沒有的話我再接再厲

🧡幫我點一個小小的廣告或留言,都是對我的支持(每天都只有詐騙跟色情留言…)

✅如有任何疑問,歡迎透過留言或messenger讓我知道 !

一天一筆記。BUG 遠離我

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *