如果你不希望用户上传任何类型的文件, 你可以使用 input 的 accept 属性.

设置支持 .doc / .docx / .xls / .xlsx / .pdf 格式:

 <input type="file" accept=".doc,.docx,.xls,.xlsx,.pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" >

如果需要支持 .png  等，则在 accept 添加上既可，都逗号分隔。

　

扩展知识：

accept 属性接受一个逗号分隔的 MIME 类型字符串, 如:

  • accept="image/png" or accept=".png" — 只接受 png 图片.
  • accept="image/png, image/jpeg" or accept=".png, .jpg, .jpeg" — PNG/JPEG 文件.
  • accept="image/*" — 接受任何图片文件类型.
  • accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" — 接受任何 MS Doc 文件类型.

<input> type 类型为 file 的 input 元素使得用户可以选择一个或多个元素以提交表单的方式上传到服务器上，或者通过 Javascript 的 File API 对文件进行操作

<input type="file"> accept属性筛选文件类型的更多相关文章

  1. input type='file'限制上传文件类型

    前端与后台数据进行对接时,就避免不了要使用ajax进行http请求,常用的请求就两个post与get:然而常见的post请求的需求是文件上传,可能我一说到文件上传大家都觉得so  easy啊,没什么嘛 ...

  2. input type=file accept中可以限制的文件类型

    在上传文件的时候,需要限制指定的文件类型. <input type="file" accept="image/*" /> accept表示可以上传文 ...

  3. input type="file" accept="image/*"上传文件慢的问题解决办法

    相信大家都写过<input type="file" name="file" class="element" accept=" ...

  4. html input file accept 上传文件类型限制格式 MIME 类型列表

    例: <input type="file" accept="application/vnd.openxmlformats-officedocument.spread ...

  5. input type=file accept中文件格式限制

    原文链接:https://blog.csdn.net/usuallyuser/article/details/83060341 accept="application/msexcel,app ...

  6. python+selenium：解决上传文件<input type='file'>标签属性被css的visibility隐藏导致无法定位元素的问题

    要想上传文件,需要找到在HTML中<input type="file" />这个标签,有它就可以利用send_keys上传文件,不过这里的<input>元素 ...

  7. input[type='file']获取上传文件路径案例

    最近在项目时,需要获取用户的上传文件的路径,便写了一个demo: <body> <input type="file" name="" valu ...

  8. jQuery 在IE下对表单中input type="file"的属性值清除

    对一个文件域(input type=file)使用了验证后,我们总会希望把文件域中的值给清空了,在IE中,由于安全设置的原因,是不允许更改文件域的值的,接下来为大家介绍一下解决方法 一般来说,在对一个 ...

  9. input type file onchange上传文件的过程中，遇到同一个文件二次上传无效的问题。

    不要采用删除当前input[type=file]这个节点,然后再重新创建dom这种方案,这样是不合理的.解释如下:input[type=file]使用的是onchange去做,onchange监听的为 ...

随机推荐

  1. Python【编码】

    编码 ————————————————————————————————让只认识0和1的计算机,能够理解我们人类使用的语言符号,并且将数据转换为二进制进行存储和传输 人类语言到计算机语言转换的形式,就叫 ...

  2. 1204: 移位运算（C）

    一.题目 http://acm.wust.edu.cn/problem.php?id=1204&soj=0 二.分析 无符号短整数关键字为:unsigned short: 无符号短整数长为2字 ...

  3. const函数返回自身的引用也是常量引用

    const函数返回自身的引用也是const 解决:根据对象是否为consr重载

  4. kubernetes核心组件kube-proxy

    一.  kube-proxy 和 service  kube-proxy是Kubernetes的核心组件,部署在每个Node节点上,它是实现Kubernetes Service的通信与负载均衡机制的重 ...

  5. 第三代PacBio测序技术的测序原理和读长

    针对PacBio单分子测序——第三代测序技术的测序原理和读长     DNA基因测序技术从上世纪70年代起,历经三代技术后,目前已发展成为一项相对成熟的生物产业.测序技术的应用也扩展到了生物.医学.制 ...

  6. Java 面向对象_继承

    继承 在继承的关系中,子类就是一个父类,也就是说,子类可以被当做父类看待,例如:父类是员工,子类是程序员,那么程序员就是一个员工,代码示例: // 员工类 public class Employee{ ...

  7. gradient 渐变

    看了大漠 写的关于 Gradient 的文章,我也想写点以便加深记忆. 首先gradient 分为linear-gradient (线性渐变) 和 radial-gradient(径向渐变),渐变是作 ...

  8. elementui禁用树形结构全部复选框

    需求:编辑回显数据后,禁用树形结构复选框,不可选中,无复选框也不可选中 <el-tabs v-model="activeName" @tab-click="hand ...

  9. export default和export的使用方式

    在node中使用 var 名称=require('模块标识符') 来导入 module.exports 和exports 来暴露成员 在ES6中,也通过规范的形式,规定了ES6中如何导入和导出模块 E ...

  10. 【Hibernate】 二级缓存及查询缓存

    一.Hibernate的二级缓存 1.1 类缓存区特点 缓存的是对象的散装的数据. 图一 Hibernate的二级缓存的散装数据 1.2 集合缓存区的特点: 缓存的是对象的id.需要依赖类缓冲区的配置 ...