html input file 设置文件类型

Posted niuben

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html input file 设置文件类型相关的知识,希望对你有一定的参考价值。

解决方案:

使用 input 的 accept 属性指定接受文件类型

-----------更新---------------

之前的代码有个缺点,打开文件窗口时会自动筛选文件夹下所有符合设定类型的文件,造成文件窗口延迟一定时间。 

优化的方法是列出你需要的 详细 类型,比如: 

For Image Files (.png/.jpg/etc), use: 

<input type="file" accept="image/x-png,image/gif,image/jpeg,image/bmp" />

这样打开的速度就快很多了

 

-------------之前的代码---------------------

下面是指定类型的代码:

Valid Accept Types:

For CSV files (.csv), use: 

<input type="file" accept=".csv" />
For Excel Files 2003-2007 (.xls), use: 

<input type="file" accept="application/vnd.ms-excel" />
For Excel Files 2010 (.xlsx), use: 

<input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />
For Text Files (.txt) use: 

<input type="file" accept="text/plain" />
For Image Files (.png/.jpg/etc), use: 

<input type="file" accept="image/*" />
For html Files (.htm,.html), use:

<input type="file" accept="text/html" />
For Video Files (.avi, .mpg, .mpeg, .mp4), use:

<input type="file" accept="video/*" />
For Audio Files (.mp3, .wav, etc), use:

<input type="file" accept="audio/*" />
For PDF Files, use:

<input type="file" accept=".pdf" /> 

以上是关于html input file 设置文件类型的主要内容,如果未能解决你的问题,请参考以下文章

input:file上传文件类型(超详细)

html file input onchage没有调用(两次选择同一个文件)

HTML Input="file" 接受属性文件类型 (CSV)

input type=file文件选择

input file 文件上传,js控制上传文件的大小和格式

input file 文件上传,js控制上传文件的大小和格式