如果你不希望用户上传任何类型的文件, 你可以使用 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. java源码 -- LinkedHashMap

    一.概述 LinkedHashMap 继承自 HashMap,在 HashMap 基础上,通过维护一条双向链表,解决了 HashMap 不能随时保持遍历顺序和插入顺序一致的问题. 除此之外,Linke ...

  2. WUSTOJ 1276: 峰峰不搞G（Java）

    1276: 峰峰不搞G 题目   给 n 数量的油漆,写出最大的数,每个数对应有油漆的花费.更多内容点击标题. 分析   我读完题,就想到用动态规划,结果是Time Limit Exceed.然后看了 ...

  3. diy操作系统 0：万事开头难

          许久之前就有写一个tiny的操作系统的打算,但时间和精力关系,想法一直没有成为最终的代码.操作系统的构建本身是个系统工程,门槛较高,需要多方面的知识,往往几行代码背后是厚厚的几本书才能说清 ...

  4. docker 实践一：简介和安装

    docker 的简介 docker 绝对是这几年来的重量级开源软件,它是使用 Go 实现的开源容器项目,分属于虚拟化技术. docker 和 虚拟机 docker 作为一种轻量级的虚拟化方式,在运行应 ...

  5. Unity塔防游戏的创建

    看了下塔防游戏的教程,比我想像的还简单一些,有些收获: (1)敌人的移动路径,其时比较简单,用了N个Empty GameObject作为路径点,然后做一个总的Empty GameObject 作为父级 ...

  6. Ocelot + Consul的demo（二）集群部署

    把服务A和服务B接口分别部署在两个ip地址上 修改 services.json文件, { "encrypt": "7TnJPB4lKtjEcCWWjN6jSA==&quo ...

  7. taglist and nerdtree

    函数:function! s:Tlist_Window_Exit_Only_Window()中的winbunr(2)改为winbunr(3),即只剩2个窗口时关闭,考虑到2个窗口肯定是同时存在,所以这 ...

  8. Linux查看系统及版本信息

    1.查看操作系统版本cat /proc/version 2.查看系统发行版cat /etc/issue 或cat /etc/redhat-release 3.查看系统内核信息uname -a

  9. 3、java基础：抽象类与接口的区别

    抽象类 我们都知道在面向对象的领域一切都是对象,同时所有的对象都是通过类来描述的,但是并不是所有的类都是来描述对象的.如果一个类没有足够的信息来描述一个具体的对象,而需要其他具体的类来支撑它,那么这样 ...

  10. C++ STL 之 常用算法

    #include <iostream> #include <vector> #include <algorithm> using namespace std; // ...