如何验证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