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

Posted 2020-10-17 ronin

　　前端与后台数据进行对接时，就避免不了要使用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