如何只接受輸入文件字段中的圖像

將文件字段添加到表單時,您可能希望將選擇器限制為圖像

當然,您可以添加服務器端篩選器,但是擁有客戶端篩選器對於您的用戶來說是一個不錯的UX-不會浪費時間,也不會浪費資源來向您發送文件並返回錯誤。

您可以使用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

免費下載我的JavaScript初學者手冊


更多瀏覽器教程: