input="file" 浏览时只显示指定文件类型 xls、xlsx、csv

落日映苍穹つ 2021-09-12 07:10 287阅读 0赞

**\[html\]**  [view plain][]   [copy][view plain]

1.  **<****input** id="fileSelect" type="file" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" **/>**

![save_snippets_01.png][]

## 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" />

DEMO:  
[http://jsfiddle.net/dirtyd77/LzLcZ/144/][http_jsfiddle.net_dirtyd77_LzLcZ_144]

--------------------

NOTE:

If you are trying to display Excel CSV files (`.csv`), do NOT use:

*  `text/csv`
 *  `application/csv`
 *  `text/comma-separated-values` (works in Opera only).

--------------------

If you are trying to display a particular file type (for example, a `WAV` or `PDF`), then this will almost always work...

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

原文：http://stackoverflow.com/questions/11832930/html-input-file-accept-attribute-file-type-csv

[view plain]: http://blog.csdn.net/hanshileiai/article/details/44702923#
[save_snippets_01.png]: /images/20210813/01de489378e94505800d84894b393323.png
[http_jsfiddle.net_dirtyd77_LzLcZ_144]: http://jsfiddle.net/dirtyd77/LzLcZ/144/

发表评论取消回复

表情：

评论列表（有 0 条评论，287人围观）

还没有评论，来说两句吧...

相关阅读

相关 Linux：只显示文件或只显示目录，并且显示全路径，shell命令怎么写

1.只显示当前目录下的目录 > find . -mindepth 1 -maxdepth 1 -type d 或 > find . -maxdepth 1 -type

谁践踏了优雅/ 2024年02月21日 12:24/ 0 赞/ 48 阅读

相关 Idea中隐藏指定文件或指定类型文件

1. Setting ->Editor ->Code Style->File Types → Ignored Files and Folders 2. 输入要隐藏的文件名，

悠悠/ 2023年10月14日 21:52/ 0 赞/ 3 阅读

相关 inputfile（bootstrap）实现文件上传保存本地路径

关于文件上传，bootstrap做了很好的封装，通过引用File input插件就能实现很好的上传。下面讲解java语言通过mvc调用bootstrap的实现

电玩女神/ 2022年09月29日 15:50/ 0 赞/ 196 阅读

相关显示商品浏览记录与删除浏览记录

给商品一个列表，并且每一件商品设置一个编号，用户点击每个商品时都会向servlet提交一个请求，servlet得知用户点击了哪件商品，并将商品编号保存在cookie中，用框图表

系统管理员/ 2022年07月14日 07:17/ 0 赞/ 205 阅读

相关 cat命令显示文件指定行

cat filename | tail -n 100 显示文件最后100行 cat filename | head -n 100 显示文件前面100行 cat filena

旧城等待，/ 2022年06月18日 12:27/ 0 赞/ 856 阅读

相关文件浏览命令

用处：日志文件，XML等文件一，cat命令：快捷查看当前文件的内容格式：cat 文件名注意：适合查看少量信息文件，无法查看大量信息文件二，more命令：分页显示

迈不过友情╰/ 2022年05月29日 11:25/ 0 赞/ 142 阅读

相关 cmd 浏览文件

linux中可以使用cat命令浏览整个文件，在windows cmd中可以使用type命令浏览文件： type 文件路径例：type 文件绝对路径

浅浅的花香味﹌/ 2022年05月25日 09:57/ 0 赞/ 186 阅读

相关 input 文件上传 --- 只上传指定文件

> 最近项目要做一个文件上传功能, 只上传 Excel 表统计数据,这里只需在form表单中 input 标签中,添加一个属性即可 <%--存放上传文件的表单域，名

你的名字/ 2022年05月11日 00:16/ 0 赞/ 586 阅读

相关 laydate只显示时分不显示秒的功能实现

场景最近有个需求，需要选择时间段，例如10:00 ~ 12:30。目前的系统前端用的是layui，时间插件自然是选择了laydate。查阅了laydate的ap

- 日理万妓/ 2021年12月12日 11:07/ 0 赞/ 524 阅读

相关 input="file" 浏览时只显示指定文件类型 xls、xlsx、csv

\[html\] [view plain][] [copy][view plain] 1. <input id="fileSelect" type="file" ac

落日映苍穹つ/ 2021年09月12日 07:10/ 0 赞/ 288 阅读