前端与后台数据进行对接时,就避免不了要使用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. laravel7文件上传至七牛云并保存在本地图片

    HTML代码: <form class="layui-form" action="{{route('doctor.store')}}" method=&q ...

  2. 【.NET6+WPF+Avalonia】开发支持跨平台的WPF应用程序以及基于ubuntu系统的演示

    前言:随着跨平台越来越流行,.net core支持跨平台至今也有好几年的光景了.但是目前基于.net的跨平台,大多数还是在使用B/S架构的跨平台上:至于C/S架构,大部分人可能会选择QT进行开发,或者 ...

  3. python学习之matplotlib实战2

    import numpy as np import matplotlib.pyplot as plt def main(): #scatter fig = plt.figure() ax = fig. ...

  4. BUU [GKCTF 2021]签到

    BUU [GKCTF 2021]签到 1.题目概述 2.解题过程 追踪HTTP流 在下面发现了一串可疑字符 Base16转base64 放到010里看看 复制下来,去转字符 好像不是,再回去找找其他的 ...

  5. k8s 开船记-脚踏两只船:船儿还是旧的好,不翻船才是硬道理

    自从上次开始脚踏两只船(2个独立的k8s集群同时运行),园子暂时用奢侈的土豪方式过上了安稳的船上生活. 这种方式除了费钱之外,还带来一个问题,我们的集装箱自动装船系统(基于gitlab-ci的自动化部 ...

  6. ArcGIS拓扑小技巧:两个面矢量合并但不叠加

    已知数据:底图图斑A,更新图斑B 使用软件:ArcMap 要求:将B于A合并为一个图斑.A与B不能重叠,重叠处以A为基准切割B图斑. 下面开始操作: 1. 将数据集中的图斑A.B添加到数据框内   打 ...

  7. Golang 包了解以及程序的执行

    Golang 包了解以及程序的执行 引言  Go 语言是使用包来组织源代码的,包(package)是多个 Go 源码的集合,是一种高级的代码复用方案.Go 语言中为我们提供了很多内置包,如 fmt.o ...

  8. Python的类和继承

    一.类的封装: 封装将类的信息隐藏在类内部,不允许外部直接修改该类的变量,只能通过该类提供的方法来实现对隐藏信息的操作和访问 class Boss(): # 类的公共属性 level=1 # 类的初始 ...

  9. Java Byte不能用equals

  10. 垃圾收集器G1和CMS ,以及老年代和新生代的比例设置

    首先 1.G1是包括年轻代和年老代的GC 2.CMS是年老代GC 3.二者在某些时候都需要FullGC(serial old GC)的辅助 ###CMS收集器:CMS(ConCurrent Mark ...