HTML 上傳檔案(Input file)的類型(Mimetype)的選擇限制

一般我們要讓使用者上傳檔案，通常會使用 <input type='file'> 來達成，但如果想要讓使用者點擊下去的時候自動顯示指定的檔案類型該怎麼辦呢? 答案就是要靠 accept 這個屬性啦！ 以下就附上範例:

1. <div>All Files<input type='file' accept='*/*'></div>  //  不限制
2. <div>Images<input type='file' accept='image/*'></div>
3. <div>Videos<input type='file' accept='video/*'></div>
4. <div>Audios<input type='file' accept='audio/*'></div>
5. <div>Custom<input type='file' accept='.zip,.rar,.7z'></div>  //  如果要限制多種便用此方式

必須要注意的是 accept 這個屬性，在W3C的規格只允許 Image/*、Video/*、Audio/* 三種，若要使用其他的限制(如上方第五行程式碼)，有些瀏覽器可能會不支援。


最後提醒大家，雖然我們在前端限制了上傳檔案的類型，但後端也務必要再檢查一次以確保安全...畢竟不是每個人都是一般使用者啊！