input file 控件上传文件相信很多小伙伴都遇到过。
首先就样式问题就能说一大堆,毕竟初始样式实在是不敢恭维。但是今天这篇文章我们不讨论input的样式。只提供一下大致思路,先包一个div里面包含input和一个span设置div的position为relative设置input的opacity为0 并且充满外部div然后设置span的样式就可以了。
接下来才是重点,我们都知道ajax不能传递文件,但是html新出的一个formdata可以。我首先想到的就是这个方法。
var formData = new FormData(this);
var file = $(that)[0].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:
<form id="form1" name="form1">
<input type="file" id="file" name="fileupload" class="inputfile poa" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" οnchange="upload(this)"></input> <span class="btn btn-primary mr10 btn-sm pointer" οnclick="uploadSure()">上传</span>
</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方式,发现能接收到。说明后台是没问题的,问题肯定是出在前端。于是把两种方式传递的请求进行了比较:
这是通过formData方式传递的:
这是通过form.js传递的:
原来后台定义的接受文件的key值是file而form.js默认把接受文件的key定义为了fileupload所以导致能接收到自定义参数却接受不到file。