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

发布于:2020-04-17 12:03:45

通常我们要实现选择文件并上传的功能时,都会用到 input file 控件。

1
<input id="file1" type="file" />


当点击选择文件时,默认文件浏览窗口里是将所有文件类型都显示出来:

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


1,使用 accept 属性限制文件类型

input file 类型控件有一个属性,名为 accept。它可以用来指定浏览器接受的文件类型,也就当我们打开系统的选择文件弹框的时候,默认界面中呈现的文件类型。

(1)只能选择 JSON 文件

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

1
<input id="file1" type="file" accept=".json"/>


(2)选择所有的图片文件

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

1
<input id="file1" type="file" accept="image/*"/>


2,多种文件类型的限制

如果想支持多种类型的话,只要在 accept 里面放置多个属性就可以了(逗号隔开)。

(1)比如前面我们使用 accept="image/*" 选择所有图片。但是在 Chrome 浏览器下,可能会出现文件选择窗口打开非常慢点问题。因此,如果仅仅是上传图片,建议使用如下设置:

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

1
<input id="file1" type="file" accept="image/png, image/jpeg, image/gif, image/jpg"/>


(2)又比如下面可以选择常用的文档文件。

1
<input id="file1" type="file" accept=".xls,.doc,.txt,.pdf"/>


原文出自:www.hangge.com  转载请保留原文链接:https://www.hangge.com/blog/cache/detail_1796.html


阅读 408+

一片空白

父爱如山,不善表达。回想十多年前,总记得父亲有个宽厚的肩膀,小小的自己跨坐在上面,越过人山人海去看更广阔的天空,那个时候期望自己有一双翅膀,能够像鸟儿一样飞得高,看得远。虽然父亲有时会和自己开玩笑,但在做错事的时候会受到严厉的训斥。父亲有双粗糙的大手掌。