jQuery-form實現檔案分步上傳
阿新 • • 發佈:2018-12-12
//新增組別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("操作過於頻繁!") } }) }