Possible Duplicate:
Limit file format when using <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.
我需要使用HTML5模式属性，在元素中只允许JPG、GIF和PNG文件。
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))$)">
This regex pattern is not compatible with HTML5? How can I test for valid HTML5 regex patterns?
这个regex模式与HTML5不兼容?如何测试有效的HTML5 regex模式?
Best Regards,
最好的问候,
1 个解决方案
#1
38
Try something like
试着像
<input type="file" name="my-image" id="image" accept="image/gif, image/jpeg, image/png" />
Click here for the latest browser compatibility table
单击这里查看最新的浏览器兼容性表
Live demo here
现场演示
To select only image files, you can use this accept="image/*"
要只选择图像文件，可以使用这个accept="image/*"
<input type="file" name="my-image" id="image" accept="image/*" />
Live demo here
现场演示
Only gif, jpg and png will be shown, screen grab from Chrome version 44
只有gif, jpg和png会显示，屏幕抓取从Chrome 44版本
#1
38
Try something like
试着像
<input type="file" name="my-image" id="image" accept="image/gif, image/jpeg, image/png" />
Click here for the latest browser compatibility table
单击这里查看最新的浏览器兼容性表
Live demo here
现场演示
To select only image files, you can use this accept="image/*"
要只选择图像文件，可以使用这个accept="image/*"
<input type="file" name="my-image" id="image" accept="image/*" />
Live demo here
现场演示
Only gif, jpg and png will be shown, screen grab from Chrome version 44
只有gif, jpg和png会显示，屏幕抓取从Chrome 44版本