1. 程式人生 > >jQuery-form實現檔案分步上傳

jQuery-form實現檔案分步上傳

//新增組別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("操作過於頻繁!")
        }
      })
    }