分步上传:当你需要提交两个及以上的文件,在一个文件成功后再提交另一个文件,并且最后需要提交所有文件的地址组成的数据
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; //防止表单自动提交 });