jquery文件上传

input file 控件上传文件相信很多小伙伴都遇到过。

首先就样式问题就能说一大堆，毕竟初始样式实在是不敢恭维。但是今天这篇文章我们不讨论input的样式。只提供一下大致思路，先包一个div里面包含input和一个span设置div的position为relative设置input的opacity为0 并且充满外部div然后设置span的样式就可以了。

接下来才是重点，我们都知道ajax不能传递文件，但是html新出的一个formdata可以。我首先想到的就是这个方法。

var formData = new FormDat0.files[0];
formData.append("file",file); //传给后台的file的key值是可以自己定义的
formData.append("params",JSON.stringify(typeData))
$.ajax({
url: baseUrl + '/cms/dataImport/import_excel',
type:'POST',
cache: false,
processData: false,
contentType: false,
data: formData,
success: function(data){

},
error: function(err) {

}
})

FormData类型其实是在XMLHttpRequest 2级定义的，它是为序列化表以及创建与表单格式相同的数据（当然是用于XHR传输）提供便利,但是后来发现这个类型的兼容性不是很好，不兼容ie9以下，没办法只能再想其他办法。

在网上搜了一下发现有两个库用的最多一个是ajaxfileupload.js还有一个是jquery.form.js。

于是试了一下jquery.min.js：写法很简单

给原来的input套一个form：

上传

调用：
var ajaxFormOption = {
type: "post", //提交方式
dataType: "json", //数据类型
data: {params:JSON.stringify(typeData)},//自定义数据参数 只能定义自定义参数的key不能修改file的key
url: baseUrl + '/cms/dataImport/import_excel',
success: function (res) {

}
};
$("#form1").ajaxSubmit(ajaxFormOption);
结果显示二者都是可以的，但是文件和参数是传给后台了，但是后台却说取不到文件。

后来又把方法改回了formdata方式，发现能接收到。说明后台是没问题的，问题肯定是出在前端。于是把两种方式传递的请求进行了比较：

原来后台定义的接受文件的key值是file而form.js默认把接受文件的key定义为了fileupload所以导致能接收到自定义参数却接受不到file。