当前位置: > > > HTML5 - 限制input file 控件可选择的文件类型(只显示指定类型)

HTML5 - 限制input file 控件可选择的文件类型(只显示指定类型)

通常我们要实现选择文件并上传的功能时,都会用到 input file 控件。
<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