jQuery-form实现文件分步上传

分步上传：当你需要提交两个及以上的文件，在一个文件成功后再提交另一个文件，并且最后需要提交所有文件的地址组成的数据

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;  //防止表单自动提交
			    });