html5 file accept属性详解

html5的file控件新增accept属性,可以让弹出窗口显示允许mime类型的文件,而不是全部文件类型。
在W3C的规格只允许Image/*Video/*Audio/*三种MIMEtype是允许的,也就是说上述三种以外的选择,就只能选择所有档案*.*
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div>All Files <input type='file'></div>
<div>Images <input type='file' accept='image/*'></div>
<div>Videos <input type='file' accept='video/*'></div>
<div>Audios <input type='file' accept='audio/*'></div>
<div>Zip Files <input type='file' accept='.zip'></div>
<div>Custom <input type='file' accept='.zip,.rar,.7z'></div>
</body>
</html>
第一个是使用了最基本的,也就是没有任何的限制
第二到第四个则是使用HTML5的规范内的MIMEtype
第五个则是限制只能上传.zip结尾的ZIP档
最后一个,则是同时允许.zip, .rar.7z三种格式
透过这样的范例,就知道怎么去限制不同类型的档案
如果想要支援所有影片档案、还有自订格式的话,就可以变成
<input type='file' accept='image/*,.exe'>
不过这边要特别注意一点,即便前端已经限制住了,后端也一定要检查,使用者传来的资料永远都是不可信的!
至于浏览器相容性的部分,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失效,等价于*.*,不懂什么问题。

发表评论

电子邮件地址不会被公开。 必填项已用*标注