HTML5 - 限制input file 控件可选择的文件类型(只显示指定类型)
通常我们要实现选择文件并上传的功能时,都会用到 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"/>