解决方案:

使用 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. 通过Process启动外部程序

    #region Process //声明一个程序类 System.Diagnostics.Process Proc; try { //声明一个程序信息类 System.Diagnostics.Proc ...

  2. C3P0连接技术

    1.导入jar包(两个) c3p0-0.9.5.2.jar和mchange-commons-java-0.2.12.jar导入数据库驱动jar包 2.定义配置文件 配置文件名称:c3p0.proper ...

  3. 二、vim的保存文件和退出命令

    vim的保存文件和退出命令   命令 简单说明 :w 保存编辑后的文件内容,但不退出vim编辑器.这个命令的作用是把内存缓冲区中的数据写到启动vim时指定的文件中. :w! 强制写文件,即强制覆盖原有 ...

  4. CodeForce 377 A mazes(dfs+连通性问题)

    Pavel 喜欢网格迷宫.一个网格迷宫是一个 n × m 的长方形迷宫,其中每个单元格要么是空白的,要么是墙体.您可以从一个单元格走到另一个单元格,只要两个单元格均是空白的,且拥有一条公共的边. Pa ...

  5. C#通过属性名字符串获取、设置对象属性值

    之前理工项目从这个博客找到了相对应的方法:C#通过属性名字符串获取.设置对象属性值 https://www.cnblogs.com/willingtolove/p/12198871.html

  6. 注释web.xml

    注释掉红框里的内容

  7. js获取当前页面的url网址信息

    设置或获取整个 URL 为字符串: window.location.href 获取内容:http://10.100.0.8:7000/SVP/ "window.location.href&q ...

  8. 如何去官网上下载tomcat的linux版本

    1.首先进入官网,进入如下位置 2.进入bin文件夹中下载: 原文链接:https://blog.csdn.net/zdb292034/article/details/82433072

  9. csrf跨站点请求伪造

    什么是csrf(跨站请求伪造) 伪造请求的定义有很多种,我将不是用户本意发出的请求统称为伪造请求(在用户不知情的情况下执行某些操作)xss的通过用户对浏览器的信任造成的,csrf是通过服务器对浏览器的 ...

  10. 如何查看当前工程,已经安装的nuget包?

    本文链接:https://blog.csdn.net/Microsoft_Mao/article/details/101161872如果想知道,当前解决方案(solution)里都安装了什么包,这里可 ...