zoukankan      html  css  js  c++  java
  • 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;  //防止表单自动提交 
    			    });         
    

      

  • 相关阅读:
    微博(MicroBlog)
    面试题网站目录
    html 打印代码,支持翻页
    C#日期格式化
    职位英语简称注解
    专业术语:闭包、网站优化 Gzip 服务器端文件压缩
    1,由于代码已经过优化或者本机框架位于调用堆栈之上,无法计算表达式的值。
    JSON-JSON 百科
    api.js
    Android消息处理机制
  • 原文地址:https://www.cnblogs.com/detanx/p/JQMorefileup.html
Copyright © 2011-2022 走看看