如何只接受圖片類型的 input file 欄位

在表單中添加一個文件欄位時，您可能希望將選擇器限制為圖片類型。

當然，您可以添加一個服務器端的過濾器，但同樣，在客戶端添加一個過濾器對於用戶體驗來說是很好的，不會浪費時間和資源將文件發送給您並得到錯誤回覆。

您可以通過使用 accept 屬性並指定您接受的文件的 MIME 類型來實現這一點。

image/* 可以匹配所有的圖片。

<input type="file" name="myImage" accept="image/*" />

如果您只想允許某些特定的文件類型，請列出它們。

<input type="file" name="myImage" accept="image/x-png,image/gif,image/jpeg" />

您可以在這裡檢查該屬性的瀏覽器支持情況：https://caniuse.com/#feat=input-file-accept