如何在HTML5中验证只允许在'input type ="文件中''' JPG，GIF还是PNG？ [英] How to validade in HTML5 to only allow in 'input type="file"' JPG, GIF or PNG?

问题描述

可能重复：

使用< input type =“ file”>？时限制文件格式

我需要使用HTML5 模式属性来仅允许< input type =file> 元素。

I need to use the HTML5 pattern attribute to only allow JPG, GIF and PNG files in a <input type="file"> element.

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

I currently have this pattern, but it is not working:

<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正则表达式模式？

This regex pattern is not compatible with HTML5? How can I test for valid HTML5 regex patterns?

最好的问候，

推荐答案

尝试类似

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

点击此处查看最新的浏览器兼容性表格

现场演示此处

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

To select only image files, you can use this accept="image/*"

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

现场演示此处

< img src =https://i.stack.imgur.com/FWFiw.pngalt =只显示gif，jpg和png，从Chrome版本44获取屏幕>
仅限将显示gif，jpg和png，从Chrome版本44屏幕抓取

Only gif, jpg and png will be shown, screen grab from Chrome version 44

这篇关于如何在HTML5中验证只允许在'input type =&quot;文件中''' JPG，GIF还是PNG？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！