HTML5 - 限制input file 控件可选择的文件类型（只显示指定类型）
作者：hangge | 2017-09-24 08:10
通常我们要实现选择文件并上传的功能时，都会用到 input file 控件。
当点击选择文件时，默认文件浏览窗口里是将所有文件类型都显示出来：
（2）选择所有的图片文件
（2）又比如下面可以选择常用的文档文件。
<input id="file1" type="file" />
当点击选择文件时，默认文件浏览窗口里是将所有文件类型都显示出来：
1，使用 accept 属性限制文件类型
input file 类型控件有一个属性，名为 accept。它可以用来指定浏览器接受的文件类型，也就当我们打开系统的选择文件弹框的时候，默认界面中呈现的文件类型。
（1）只能选择 JSON 文件
<input id="file1" type="file" accept=".json"/>
（2）选择所有的图片文件
<input id="file1" type="file" accept="image/*"/>
2，多种文件类型的限制
如果想支持多种类型的话，只要在 accept 里面放置多个属性就可以了（逗号隔开）。
（1）比如前面我们使用 accept="image/*" 选择所有图片。但是在 Chrome 浏览器下，可能会出现文件选择窗口打开非常慢点问题。因此，如果仅仅是上传图片，建议使用如下设置：
<input id="file1" type="file" accept="image/png, image/jpeg, image/gif, image/jpg"/>
（2）又比如下面可以选择常用的文档文件。
<input id="file1" type="file" accept=".xls,.doc,.txt,.pdf"/>
全部评论（0）