限制文件域上传的类型 ​

​ input 上传文件时时常需要限制文件的类型，一般都是通过文件域更新时获取文件判断文件类型，些许有些复杂，下面介绍一种通过 html 属性就可以限制类型的方法。

IE9 及以下不支持下面这些功能，其它浏览器最新版本均已支持。

1、允许上传文件数量 ​

• 允许选择多个文件：<input type="file" multiple>
• 只允许上传一个文件：<input type="file" single>

2、上传指定的文件格式 ​

如指定默认格式为 gif、png：<input type="file" accept="image/gif,image/png" />

如果不限制上传图片的格式，只限制图片可写成：accept="image/*"

这里的上传格式仅指打开上传弹窗选择文件时默认的文件格式，也可选择文件时手动修改成所有文件(*)

限制.xls 文件:accept="application/vnd.ms-excel"

限制.xlsx 文件:accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"

同时限制上传.xls、.xlsx 文件:<input class="note-image-input form-control" type="file" name="files" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel " multiple="multiple">

这只是指定了选择文件的默认类型，真实限制类型还要用到 JS 代码

if (["xls", "xlsx"].indexOf(FileExt.toLowerCase()) === -1) {
  this.$message.warning("只能上传.XLS.XLSX格式的文件!");
  return false;
}

if (["xls", "xlsx"].indexOf(FileExt.toLowerCase()) === -1) {
  this.$message.warning("只能上传.XLS.XLSX格式的文件!");
  return false;
}

3.其他的 accept 的接受格式 ​