分步上传：当你需要提交两个及以上的文件，在一个文件成功后再提交另一个文件，并且最后需要提交所有文件的地址组成的数据
HTML：
<form id="uploadVideoForm" enctype="multipart/form-data">
<label for="group-name">组别名称：</label>
<input type="text" name="group-name"/>
<label for="head-name">负责人：</label>
<input type="text" name="head-name"/>
<div class="check-video">
<span>视频简介：</span>
<video id="myVideo" autoPlay width="300"></video>
<input type="file" accept="video/*" class='intro-video' name="file"/>
</div>
<div class="martop">
<div class="group-intros">
<p>负责人简介</p>
<input type="text" name="group-head"/>
<p>组别介绍</p>
<input type="text" name="group-intro"/>
<p>组内成员</p>
<input type="text" name="group-people"/>
</div>
</div>
<button class="save">添加</button>
<button class="update_data">确定修改</button>
<span class="cancle">清空</span>
</form>
<form id="uploadImgForm" enctype="multipart/form-data">
<label for="video-name">负责人照片:</label>
<div id="box">
<img id="imgshow" src="" alt=""/>
</div>
<div id="pox">
<input id="filed" type="file" accept="image/*" name="file"/>
</div>
<button class="update_group"></button>
</form>
JS：在点击提交后，执行文件的提交并阻止默认提交，提交成功后或者第一个文件为空时，使用$(element).trigger('click')触发另一个表单的点击（提交）事件并阻止默认提交，成功后使用Ajax发送结果的json数据。
//新增组别ajax
newGroupAjax:function(data) {
let _this = this;
console.log(data)
let optionType = localStorage.getItem("optionType")
if(optionType === 'save') {
optionType = "/admin/add_group"
}
else {
optionType = "/admin/update_group"
data.groupId = localStorage.getItem("groupId")
} console.log(optionType)
$.ajax({
url: BASEPATH + optionType,
type: "post",
data: data,
dataType: "json",//返回数据格式为json
xhrFields:{
withCredentials:true
},
success: function(data) {
console.log(data)
if(data.status === 0) {
_this.enptyFunction()
_this.getAllGroup()
}
},
error: function(err) {
console.log(err)
}
})
},
//新增组别
createGroup:function() {
let _this = this;
let postdatas = null;
function imgFileUpload(imgValue, postdata) {
if(imgValue !== "") {
let imgfileType = _this.getFileType(imgValue)
if(imgfileType !== 'bmp' && imgfileType !== 'png' && imgfileType !== 'jpg' && imgfileType !== 'jpeg'){
_this.layerOpen("请上传png/jpg等图片类型的文件！")
$('#filed').val("");
return;
}
var optionss = {
type: 'POST',
url: BASEPATH + "/file/upload_file",
dataType: 'json',
xhrFields:{
withCredentials:true
},
success: function(data) {
console.log(data)
if(data.status === 0) {
$('#filed').val("");
localStorage.setItem('groupMainImg',data.data)
postdatas.groupMainImg = data.data _this.newGroupAjax(postdatas)
}
else if(data.status === 20002) {
_this.layerOpen(data.msg);
window.open('../index.html','_self')
}else {
_this.layerOpen(data.msg);
$('#filed').val("");
}
},
error : function(xhr, status, err) {
_this.layerOpen("操作失败");
}
};
$("#uploadImgForm").submit(function(e){
$(this).ajaxSubmit(optionss);
return false; //防止表单自动提交
});
}else {
postdatas.groupMainImg = ""
$("#uploadVideoForm").submit(function(e){
return false;
});
_this.newGroupAjax(postdatas)
}
}
//视频图片
$('body').on('click', '.update_group', function(e) {
if(e.target.className === 'update_group' && flag1) {
let times = 60
flag1 = false;
let timers = setInterval(function() {
times --;
if(times <= 0) {
clearInterval(timers);
flag1 = true;
return;
}
},1000)
let imgValue = $('#filed').val()
imgFileUpload(imgValue)
}
})
//新增/修改
$('body').on('click', '.save,.update_data', function(e) {
let targetName = e.target.className
localStorage.setItem("optionType",targetName)
let group_name = $('input[name="group-name"]').val()//组别名称
let head_name = $('input[name="head-name"]').val()//负责人
// let intro_video = $(".intro-video").val($(inputs[4]).val())//简介视频
// let head_filed = $("#filed").val($(inputs[2]).val())//负责人头像
let group_head = $("input[name='group-head']").val()//负责人简介
let group_intro = $("input[name='group-intro']").val()//组别介绍
let group_people = $("input[name='group-people']").val()//组别成员
if(group_name.trim() === '' || UNAMERE.test(group_name)){
_this.layerOpen('组别名称不能为空或含特殊字符！');
return;
}
if(head_name.trim() === '' || UNAMERE.test(head_name)){
_this.layerOpen('负责人不能为空或含特殊字符！');
return;
}
if(group_head.trim() === '' || group_head.trim() === '' || group_people.trim() === ''){
_this.layerOpen('负责人简介/组别介绍/组内成员不能为空！');
return;
}
postdatas = {
groupName: group_name,
groupMainIntroduce: group_head,
groupIntroduce: group_intro,
groupMates: group_people,
groupMainPeople: head_name
}
if(targetName === 'save' || targetName === 'update_data' && flag) {
let time = 60
flag = false;
let timer = setInterval(function() {
time --;
if(time <= 0) {
clearInterval(timer);
flag = true;
return;
}
},1000)
let introValue = $('.intro-video').val()
if(introValue !== "") {//介绍视频不为空
let introfileType = _this.getFileType(introValue)
if(introfileType !== 'mp4' && introfileType !== 'rmvb' && introfileType !== 'avi' && introfileType !== 'ts'){
_this.layerOpen("请上传mp4/rmvb等视频类型的文件！")
$('.intro-video').val("");
return;
}
var options = {
type: 'POST',
url: BASEPATH + "/file/upload_file",
dataType: 'json',
xhrFields:{
withCredentials:true
},
success: function(data) {
console.log(data)
if(data.status === 0) {
localStorage.setItem('groupVideo',data.data)
postdatas.groupVideo = data.data//postdatas赋值 $('.intro-video').val("");
$('.update_group').trigger('click')
}
else if(data.status === 20002) {
_this.layerOpen(data.msg);
window.open('../index.html','_self')
}else {
_this.layerOpen(data.msg);
$('.intro-video').val("");
}
},
error : function(xhr, status, err) {
_this.layerOpen("操作失败");
}
};
$("#uploadVideoForm").submit(function(e){
$(this).ajaxSubmit(options);
return false; //防止表单自动提交
});
}else {
postdatas.groupVideo = ""
$("#uploadVideoForm").submit(function(e){
return false;
});
$('.update_group').trigger('click')
}
}else {
_this.layerOpen("操作过于频繁！")
}
})
}
附：
jQuery-form，获取地址：链接: https://pan.baidu.com/s/10mlT36j5yizgO9Xq8OxelQ 提取码: 2jgu
发送文件示例：
注：提交的按钮需卸载form标签中，并且为button按钮
var options = {
type: 'POST',
url: BASEPATH + "/student/upload_students",
dataType: 'json',
xhrFields:{
withCredentials:true
},
success: function(data) {
if(data.status === 20000) {
_this.layerOpen("上传成功！");
$('input[name="file"]').val("");
}
else if(data.status === 20002) {
_this.layerOpen(data.msg);
window.open('../index.html','_self')
}else {
_this.layerOpen(data.msg);
$('input[name="file"]').val("");
}
},
error : function(xhr, status, err) {
_this.layerOpen("操作失败");
}
};
$("#uploadForm").submit(function(e){ //uploadForm表单名称
e.preventDefault()
$(this).ajaxSubmit(options);
return false; //防止表单自动提交
});