input file accept限制文件上传类型
大家好，又见面了，我是你们的朋友全栈君。
一、需求
上传文件只允许上传doc、docx、jpg、png、gif和pdf格式的文件，需要在前后端进行双重限制
二、前端实现
1）前端限制
通过input file accept属性实现，在accept中以逗号分隔开【图一】，便可以实现选择文件时，默认只可选择设定格式的文件【图二】,需要说明的是，MIME格式image/jpeg对应.jpg，.jpeg等几种格式，不能达到只单独限制jpg格式的，js再次过滤提示即可。
图一
<input type="file" name="attach_path" value="" accept="application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,image/jpeg,image/png,image/gif,application/pdf">图二
2）【图二】中可以看到，默认只选择accept中自定义格式的文件，下拉中依旧可以选择所有文件，如果需要前端更严密的控制，可以通过 js 再次验证处理;
不使用上传附件插件，使用通用的input file方式添加js验证格式方法：
$('input[type="file"]').live("change", function () {
var file = this.files && this.files [0];
if (file) {
//判断文件格式
var index= file.name.lastIndexOf(".");//获取最后一个.的位置
var ext = file.name.substr(index+1);//获取后缀
var pattern = /^(doc|docx|jpg|jpeg|png|gif|xls|xlsx|txt|html|htm|zip|rar|pdf)$/;
if(!pattern.test(ext))
{
alert("文件格式不支持");
return false;
}
var filename = file['name'];
var row = $("<li>", {class: "row"});
row.append('<span class="path-name">' + filename + '</span>');
row.append('<a href="javascript:;" class="js-del-row el-icon-delete"></a>');
$(this).parent().prepend('<input type="file" class="hide">');
this.name = "attach[]";
row.append(this);
}
});3）快速查看上传文件的mine类型
1、方法1：
后台直接打印var_dump($_FILES);exit;打印信息中即可看到
2、方法2：
前端打印
$('input[type="file"]').live("change", function () {
var file = this.files && this.files [0];
console.log(file)
});
3、遇到的问题
百度查到.rar对应的mine类型为application/x-rar-compressed，但是写入accept中后，上传文件窗口并未显示rar的限制；
通过后端打印rar的类型为application/octet-stream，写入accept中并未显示rar的限制；
通过前端打印rar的类型为空，最后不得已使用name获取后缀名称进行的文件格式验证
4）input file accept的兼容情况,此图仅用来说明accept有兼容情况，随着时间的推移，兼容情况有变，请自行注意哦。
5）input file accept中限制的格式为MIME格式，根据需求添加对应的MIME格式即可，不同的应用程序支持不同的 MIME 类型，所以每个MIME设置后对应的一个或者多个格式，以最终添加文件时显示的自定义文件类型为准。 MIME 参考手册
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/160962.html原文链接：https://javaforall.cn
腾讯云开发者
