如何驗證HTML5只允許在'input type ='file''JPG，GIF或PNG？

Question

可能重複：
Limit file format when using <input type=「file」>?

我需要使用HTML5 pattern屬性只允許JPG，GIF和PNG文件在<input type="file">元素。

我現在有這個模式，但它不工作：

<input type="file" class="input-file" id="tbinstUploadFile0" name="tbinstUploadFile0" placeholder="Please insert an image file..." pattern="([^\s]+(\.(?i)(jpg|png|gif|bmp))$)"> 

這正則表達式是不兼容HTML5的？我如何測試有效的HTML5正則表達式模式？

最好的問候，

Answer 1

試着這麼做

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

點擊here for the latest browser compatibility table

現場演示here

只選擇圖像文件，你可以使用這個accept="image/*"

<input type="file" name="my-image" id="image" accept="image/*" /> 

現場演示here

只支持GIF，JPG和PNG將顯示，從Chrome版本屏幕抓取44