解决方案:

使用 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. 【C/C++】最短路径

    BFS求无权图的最短路径 用book数组的值表示路径长度即可,省略 Floyd算法(允许负边) Floyd算法可以一次性求出所有节点之间的最短距离,且代码简单,但是时间复杂度达到了n^3,因此只适用于 ...

  2. 用C#调用外部DLL

    1.有时候需要用C#调用外部的dll,例如c++写的dll,首先需要保证dll的编译环境与本项目的环境是相同的,例如都是x86位或者x64位 2.调用声明和dll内的声明一致: function Te ...

  3. python之路模块

    time模块 print time.time() print time.mktime(time.localtime()) print time.gmtime() #可加时间戳参数 print time ...

  4. 05 部署mysql关系数据库

    01 安装Mysql 在官网https://dev.mysql.com/上找到自己需要的版本并执行安装 sudo apt-get install mysql-server-5.7 02 运行和退出 # ...

  5. 算法竞赛入门经典第二版 蛇形填数 P40

    #include<bits/stdc++.h> using namespace std; #define maxn 20 int a[maxn][maxn]; int main(){ ; ...

  6. actiBPM插件的办法

    1.下载actiBPM到本地 从IDEA官网下载actiBPM.jar包 IDEA官网:https://plugins.jetbrains.com/ 官网搜索actiBPM 2.从本地安装actiBP ...

  7. 安装proxmox VE(PVE)教程

    proxmox VE,又叫PVE,全称是 Proxmox Virtual Environment 官网地址:https://www.proxmox.com/en/ 1)在官网下载PVE最新镜像,笔者下 ...

  8. 阿里云安装Nginx+vue项目部署

    阿里云安装Nginx+vue项目部署 nginx安装包下载 http://nginx.org/en/download.html nginx安装 首先先安装PCRE pcre-devel 和Zlib,因 ...

  9. [HNOI2017] 礼物 - 多项式乘法FFT

    题意:给定两个 \(n\) 元环,环上每个点有权值,分别为 \(x_i, y_i\).定义两个环的差值为 \[\sum_{i=0}^{n-1}{(x_i-y_i)^2}\] 可以旋转其中的一个环,或者 ...

  10. flask入门(一)

    flask是一个轻量级的框架,据说跟django跟比是真的轻. 首先要先配置一个虚拟环境,flask项目需要在那个虚拟环境里运行,这里需要用的venv库实在python3里的标准库,不过有的linux ...