问题是这样的:
用户要求可以实现拖拽文件上传,用了Bootstrap-fileinput
发现它不兼容ie,那就用layui
吧!
我希望用户上传的文件能一次性上传,并把表单数据一起传到后台
layui实现多文件上传时,上传几个文件就会触发几次接口,但我希望它只执行一次,查了很多资料无果。
那就不去触发layui的接口了,那样会导致表单文件被重复提交,
所以我采用了ajax提交表单,formdata打包文件和表单数据,一起传到后台。
下面代码都在layui官网上copy的,
这里最重要的一点就是要把files设置为全局变量,这样会相应地更新files
$(function(){
var files; //很重要 设置全局变量
layui.use('upload', function () {
var $ = layui.jquery
, upload = layui.upload;
//多文件列表示例
var demoListView = $('#demoList')
, uploadListIns = upload.render({
elem: '#testList'
, url: '/Home/insertTeam' //其实没用到
, accept: 'file'
, multiple: true
, auto: false
, bindAction: '#upload'//其实也可以不用设置 因为没触发
, drag: true
, number: 3
, exts: 'jpg|png|jpeg|pdf|doc|docx|rar|zip|dwg'
, before: function (obj) {f
$('#submit').html('@Resources.validator.submitting');
$('#submit').attr('disabled', true);
this.data = $('#teamForm').serializeObject();
}
, size: 10240
, choose: function (obj) {
files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
//读取本地文件
obj.preview(function (index, file, result) {
var tr = $(['+ index + '">'
, '' + file.name + ' '
, '' + (file.size / 1024).toFixed(1) + 'kb '
, '@Resources.MyResources.waiting '
, ''
, ''
, ' '
, ' '].join(''));
//删除
tr.find('.demo-delete').on('click', function () {
delete files[index]; //删除对应的文件
tr.remove();
uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值,以免删除后出现同名文件不可选
});
demoListView.append(tr);
});
}
, done: function (res, index, upload) {
if (res.code == 0) {
//上传成功
alert('@Resources.validator.applySucc');
window.location.href = "/@ViewContext.RouteData.Values["lang"]/Home/team";
}
this.error(index, upload);
delete this.files[index];
}
, error: function (index, upload) {
var tr = demoListView.find('tr#upload-' + index)
, tds = tr.children();
tds.eq(2).html('上传失败');
tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
}
});
});
//提交表单 写在下面
});
紧接着上面的,提交表单,表单一定要设置onsubmit="false"
,取消表单的默认提交,或者不要将button的type设置为submit,我们使用的是ajax提交。这里最重要的就是打包formdata,ajax里的 processData:false,
一定得设置,表示不处理数据
let formdata = new FormData;
for (let i in files) {//这个files就是全局变量
formdata.append('file',files[i]);
}
formdata.append('customer', 'hello');
let form=$('#teamForm').serializeObject()
for (let key in form) {
formdata.append(key, form[key]);
}
$.ajax({
url: '/Home/insertTeam',
dataType: 'json',
type: 'post',
cache:false,
contentType: false,
processData:false,//必须设置
data: formdata,
success: function (data) {
if (String(data) == "true") {
alert('@Resources.validator.applySucc');
window.location.href = "@ViewContext.RouteData.Values["lang"]/Home/team";
} else {
alert('@Resources.validator.error')
}
}, error: function () {
alert('@Resources.validator.error');
}
})
表单序列化的方法在这里
$.fn.extend({
serializeObject: function () {
var o = {};
var a = this.serializeArray();
$.each(a, function () {
if (this.name != "file") {//排除文件上传
if (o[this.name]) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
}
});
return o;
}
});
HttpFileCollectionBase files = Request.Files;//上传的文件
string username = Request["username"]; //表单数据 对应name属性
就这问题也困扰了我很久,唉!