解决方案:

使用 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 设置文件类型的更多相关文章

  1. HTML5: input:file上传类型控制

    ylbtech-HTML5: input:file上传类型控制   1. 一.input:file 属性返回顶部 一.input:file属性 属性值有以下几个比较常用: accept:表示可以选择的 ...

  2. HTML5的 input:file上传类型控制(转载)

    http://www.haorooms.com/post/input_file_leixing HTML5的 input:file上传类型控制 2014年8月29日 66352次浏览 一.input: ...

  3. struts2 input file多文件同时通过ajax提交

    <input type="file" name="files" multiple="multiple">必须是multiple才 ...

  4. HTML5的 input:file上传类型控制

    一.input:file属性 属性值有以下几个比较常用: accept:表示可以选择的文件MIME类型,多个MIME类型用英文逗号分开,常用的MIME类型见下表. multiple:是否可以选择多个文 ...

  5. 动态input file多文件上传到后台没反应的解决方法!!!

    其实我也不太清除具体是什么原因,但是后面就可以了!!! 我用的是springMVC 自带的文件上传 1.首先肯定是要有springMVC上传文件的相关配置! 2.前端 这是动态input file上传 ...

  6. php设置文件类型content-type

    在PHP中可以通过header函数来发送头信息,还可以设置文件的content-type,下面整理了一些常见文件类型对于的content-type值. //date 2015-06-22//定义编码h ...

  7. html,图片上传预览,input file获取文件等相关操作

    input file常用方法: var obj=document.getElementById("upimage"); var file=obj.files[0];//获取文件数据 ...

  8. file - 确定文件类型

    总览 file [ -bcnsvzL ] [ -f 命名文件 ] [ -m 幻数文件 ] file ... 描述 本手册页说明了3.27版本 file 命令的使用. File 命令试图检查每个参数以判 ...

  9. input type="file"指定文件类型为excel

    指定上传类型为excel:加上accept="application/vnd.ms-excel"即可,只兼容chrome跟ff,不兼容ie <input type=" ...

随机推荐

  1. 数据库之六:聚合函数、group by、having、order by

    1.聚合函数: 1.1.COUNT: 计算表中的记录数(行数)可以计算出所有数据行: select count(*) from table_name 可以计算出所有非空行数 select count( ...

  2. 详解C/C++中的的:#pragma pack(push) 、#pragma pack(pop) 和#pragma pack()

    前言 我们知道结构体内存对齐字节可以通过#pragma pack(n) 的方式来指定. 但是,有没有想过一个问题,某些时候我想4字节对齐,有些时候我又想1字节或者8字节对齐,那么怎么解决这个问题呢? ...

  3. python面试的100题(14)

    32.请写出一个函数满足以下条件 该函数的输入是一个仅包含数字的list,输出一个新的list,其中每一个元素要满足以下条件: 1.该元素是偶数 2.该元素在原list中是在偶数的位置(index是偶 ...

  4. No module named ‘sklearn.model_selection解决办法

    在python中运行导入以下模块 from sklearn.model_selection import train_test_split 出现错误:  No module named ‘sklear ...

  5. g++运行c++程序提示main()找不到

    /usr/lib/gcc/x86_64-linux-gnu/5/../../../x86_64-linux-gnu/crt1.o: In function `_start': (.text+0x20) ...

  6. SharePoint资料

    链接:https://pan.baidu.com/s/1QOSShE02LYKXFtoJ58WCQQ 提取码:dnhs 复制这段内容后打开百度网盘手机App,操作更方便哦 SharePoint 200 ...

  7. 比较一下数据结构的链表和linux i2c驱动难度比较

  8. PCB常见的拓扑结构

    1.点对点拓扑 point-to-point scheduling 该拓扑结构简单,整个网络的阻抗特性容易控制,时序关系也容易控制,常见于高速双向传输信号线:常在源端加串行匹配电阻来防止源端的二次反射 ...

  9. Action路径问题

    上网搜了一下,先给个解决方案,贴个图保存,后面再专门写一写总结.

  10. 使用docker布署wordpress

    环境准备 本博客使用docker环境搭建,从而做到布署简单 centos7环境(centos6跑docker要升级内核,也不建议这样做) 在centos7上安装好docker环境docker安装文档 ...