regex - 如何在 HTML5 中验证以仅允许在“输入类型 =“文件””中使用 JPG、GIF 或 PNG？

Question

可能重复：
使用 <input type=“file”> 时限制文件格式？

我需要使用 HTML5pattern属性在一个<input type="file">元素中只允许 JPG、GIF 和 PNG 文件。

我目前有这种模式，但它不起作用：

<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" />

单击此处获取最新的浏览器兼容性表

现场演示在这里

要仅选择图像文件，您可以使用此accept="image/*"

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

现场演示在这里

仅显示 gif、jpg 和 png，屏幕抓取来自 Chrome 版本 44