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

   日期:2024-12-27    作者:op4j4 移动:http://oml01z.riyuangf.com/mobile/quote/61110.html

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

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

 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特性指定的文件类型那么你在打开的本地磁盘文件中就看不到这些文件。


特别提示:本信息由相关用户自行提供,真实性未证实,仅供参考。请谨慎采用,风险自负。


举报收藏 0评论 0
0相关评论
相关最新动态
推荐最新动态
点击排行
{
网站首页  |  关于我们  |  联系方式  |  使用协议  |  隐私政策  |  版权隐私  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  鄂ICP备2020018471号