html5 accept 无效,html5 file accept属性详解

html5的file控件新增accept属性，可以让弹出窗口显示允许mime类型的文件，而不是全部文件类型。

在W3C的规格只允许Image/*、Video/*、Audio/*三种MIMEtype是允许的，也就是说上述三种以外的选择，就只能选择所有档案*.*

DEMO

JS Bin

All Files

Images

Videos

Audios

Zip Files

Custom

第一个是使用了最基本的，也就是没有任何的限制

第二到第四个则是使用HTML5的规范内的MIMEtype

第五个则是限制只能上传.zip结尾的ZIP档

最后一个，则是同时允许.zip, .rar和.7z三种格式

透过这样的范例，就知道怎么去限制不同类型的档案

如果想要支援所有影片档案、还有自订格式的话，就可以变成

不过这边要特别注意一点，即便前端已经限制住了，后端也一定要检查，使用者传来的资料永远都是不可信的！

至于浏览器相容性的部分，IE10+

第五和第六种以及最后介绍的混合的都是非W3C规范内的所以FireFox不支持(实测firefox39+支持直接后缀形式)

补充：webkit核心浏览器，如chrome，及IE10+浏览器，选择rar文件竟然没有type属性，设置accept为application/rar，或者application/x-rar-compressed此种类型的mime也无法显示rar文件。不过可以增加后缀形式.rar，chrome39支持此种形式accept，选择文件窗口出现rar文件。firefox下rar文件type属性为application/rar则没有问题。

firefox下如果accept设置为application/x-rar-compressed，会导致accpet失效，等价于*.*，不懂什么问题。。。

加支付宝好友偷能量挖...

2016-6-2网络

阅读(1795)喜欢(0)