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 参考手册