inputtype=file限制上传⽂件类型
  前端与后台数据进⾏对接时，就避免不了要使⽤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()⽅法怎么⽤，可以看我的这篇博⽂：inputtypefile样式
　2、　css实现：不知道⼤家有没有注意到⼀个细节，那就是我选择了⽂件之后，如果不是我规定的类型页⾯就会弹框告诉我不⽀持这个格式的⽂件，那么问题就来了，既然不⽀持这种格式的⽂件，那我可不可以在点开⽂件进⾏选择的时候，不是我要的格式的⽂件就不显⽰，那我就不能选择，同时页⾯也不会这么讨厌的让我去重新选择它要的格式，能做到吗？答案是能，⽽且不需要任何代码，简简单单的在html页⾯就能实现：代码如下：
  <input  type ="file"  accept="image/jpg, image/png, image/jpeg, image/gif">
  在input⽂件框中，添加accept特性，特性中限制⽂件类型，那么在点开输⼊框进⼊本地磁盘选择⽂件时，不是accept特性指定的⽂件类型那么你在打开的本地磁盘⽂件中就看不到这些⽂件。
这是最近做项⽬时遇到的⼀个很好解决⽂件类型限制问题的⽅法，所以写出这篇博⽂跟⼤家分享，如有不⾜之处，欢迎与我交流：qq: 1540302851

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。