前端与后台数据进行对接时,就避免不了要使用ajax进行http请求,常用的请求就两个post与get;然而常见的post请求的需求是文件上传,可能我一说到文件上传大家都觉得so  easy啊,没什么嘛,就是几行 js 代码就能搞定的事。是的,简单的文件上传是可以直接使用FormData()对象将文件上传;如果问题只是这么简单就好了,可能大家也都遇到过上传文件类型的限制,不知道大家有没有注意到这么简单的方法将文件类型过滤,下面直接贴代码:

 1、 js实现:js实现上传文件类型的限制是将允许上传的文件的后缀名全部列出,以数组的形式存储,然后通过数组的indexof方法即可,以图片为例代码如下

    var  fileType = ['jpg' ,'png' , 'jpeg' , 'gif' , 'bmp']

    var file  = e.target.files[0]

    if(fileType.indexof(file) < 0) {

      alert(‘不支持这种类型的文件’)

    }

关于数组的indexof()方法怎么用,可以看我的这篇博文:http://www.cnblogs.com/novice007/p/7077914.html

 2、 css实现:不知道大家有没有注意到一个细节,那就是我选择了文件之后,如果不是我规定的类型页面就会弹框告诉我不支持这个格式的文件,那么问题就来了,既然不支持这种格式的文件,那我可不可以在点开文件进行选择的时候,不是我要的格式的文件就不显示,那我就不能选择,同时页面也不会这么讨厌的让我去重新选择它要的格式,能做到吗?答案是能,而且不需要任何代码,简简单单的在html页面就能实现:代码如下:

  <input   type ="file"  accept="image/jpg, image/png, image/jpeg, image/gif">

  在input文件框中,添加accept特性,特性中限制文件类型,那么在点开输入框进入本地磁盘选择文件时,不是accept特性指定的文件类型那么你在打开的本地磁盘文件中就看不到这些文件。

这是最近做项目时遇到的一个很好解决文件类型限制问题的方法,所以写出这篇博文跟大家分享,如有不足之处,欢迎与我交流:qq: 1540302851

input type='file'限制上传文件类型的更多相关文章

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

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

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

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

  3. input type file onchange上传文件的过程中,同一个文件二次上传无效的问题。

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

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

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

  5. input type=file 图片上传相关

    HTML: <input type="file" name="address"   onchange='PreviewImage(this)' value ...

  6. <input type="file"> accept属性筛选文件类型

    如果你不希望用户上传任何类型的文件, 你可以使用 input 的 accept 属性. 设置支持 .doc / .docx / .xls / .xlsx / .pdf 格式: <input ty ...

  7. input file限制上传文件类型

    http://www.cnblogs.com/haocool/p/3431181.html http://www.haorooms.com/post/input_file_leixing http:/ ...

  8. 上传文件表单file,限制上传文件类型的方法--参数accept

    我们使用<input type="file" />来上传文件,但是当你只想要上传某种格式的文件,比如说(jpg)文件时.可以通过accept来限制. <form& ...

  9. HTML5中的input type为file控件限制上传文件类型及扩展

    简单介绍 input file控件限制上传文件类型如下:1.文件类型中间用,分开:2.html和htm这样的要写成两个: 3实例: <input type="file" na ...

随机推荐

  1. linux tr命令实现windows文本格式与linux文本格式间的转换

    tr 命令 转换和删除字符 选项: -d --delete:删除字符 -s --squeeze-repeats:把连续重复的字符以一个字符表示,即去重 -c –C --complement:取字符集的 ...

  2. cmd git的使用

    1:新建仓库 2: 克隆:

  3. tp5 git 常见命令

    git clone git add . # 跟踪所有改动过的文件 git commit -m "commit message" # 提交所有更新过的文件 git checkout ...

  4. 路径查找算法应用之A*算法

    环境:Visual Studio 2017 + .Net Framework 4.5 应用场景:在画板上查找起始点和目标点之间的最短最直路径,最后画出连接两个点之间的折线. 算法简介:A*算法是一种性 ...

  5. Net6 Configuration & Options 源码分析 Part2 Options

    Net6 Configuration & Options 源码分析 Part2 Options 第二部分主要记录Options 模型 OptionsConfigurationServiceCo ...

  6. 除了增删改查你对MySQL还了解多少?

    目录 除了增删改查你对MySQL还了解多少? MySQL授权远程连接 创建用户.授权 客户端与服务器连接的过程 TCP/IP 命名管道和共享内存 Unix域套接字文件 查询优化 MySQL中走与不走索 ...

  7. 随手用Java写的bilibili缓存视频转换器(合成分离的视频和音频)

    使用java随手写成,有需要可以自行修改. 项目使用到了fastjson,可以自行替换成其他json解析工具. 写这个的原因是因为下载到的其他工具弄出来的视频标题过长(应该取entry.json中的s ...

  8. ESP8266 NodeMCU引脚说明,CH340和CP2102两款

    开发ESP8266 NodeMCU GPIO功能时,虽然知道ESP8266 NodeMCU丝印引脚编号如下图所示(CP2102款),但是和实际对应的GPIO编号完全不一样.   CP2102款 引脚说 ...

  9. Charles的安装及设置

    1. Charles的安装 l  下载安装包 l  安装:按照提示信息一步步安装,不做多余解释 l  破解:将Charles.jar包放在安装目录,如D:\Program Files\Charles\ ...

  10. Apache Tomcat如何高并发处理请求

    介绍 作为常用的http协议服务器,tomcat应用非常广泛.tomcat也是遵循Servelt协议的,Servelt协议可以让服务器与真实服务逻辑代码进行解耦.各自只需要关注Servlet协议即可. ...