zoukankan      html  css  js  c++  java
  • 当使用springMVC框架,用ajax传输带文件的表单数据

    此时可以通过做两次Ajax传输来实现接受带文件的表单数据。

    前台:在第一次Ajax传输时,将表单数据数据序列化,传入后台,然后在回掉方法中,借助jQuery异步上传插件AjaxFileUpload将文件上传。

    HTML部分

    <form class="form-horizontal" name="form1" method="post" id="form1" enctype="multipart/form-data">
         <fieldset>
            <legend></legend>
      
           	<div class="form-group">
              	<label class="col-sm-3 control-label" for="ds_host">申报部门</label>
              	<div class="col-sm-2">
                 	<select id="deptList" name="deptId" class="form-control">${deptList}</select>
    				<font id="deptListNotNull"></font>
              	</div>
              	          	
           </div>
           
           
           <div class="form-group">
     			<label class="col-sm-1 control-label" for="ds_host">用户信息上传</label>
     			
        		<div class="col-sm-3">
            		<input class="" id="userExcel" style="margin-top: 5px;" name="file" type="file" onchange="checkFileExt(this.value)"/>
    				<font id="fileNotRight"></font>
        		</div>
           </div>
        </fieldset> 
        
    </form>
    

      

    JS部分

    var oper=$("#oper").val();
                  $.ajax({
                    type: "POST",
                    dataType: "html",
                       url: "${contextPath}/aptitude/outsiderApplication/doOperate",
                       data: $('#form1').serialize(),
    //                data: formData,
                       success: function (data) {
                           if($("#userExcel").val()!=''){
                               //进行文件上传
                               $.ajaxFileUpload({ 
                                url:'${contextPath}/aptitude/outsiderApplication/saveUserExcel?oid='+data,  
                                secureuri:false,  
                                fileElementId: 'userExcel',  
                                dataType: 'json',
                                type:'post',  
                                success:function(data){
                                    if(data.flag == "all"){
                                        alert("文件全部上传成功");
                                    }else if(data.flag=="notall"){
                                        alert("文件部分上传成功")
                                    }
                                    parent.$("#grid-table").trigger("reloadGrid");
                                    parent.layer.close(index);
                                },
                                error:function(data, status, e){
                                      parent.$("#grid-table").trigger("reloadGrid");
                                      parent.layer.close(index);
                                }
                            }); 
                           }else{
                            parent.$("#grid-table").trigger("reloadGrid");
                               parent.layer.close(index);                                                           
                           }
                      },
                      error: function(data) {
                         layer.msg(data.responseText);
                         document.getElementById("submitButton").disabled=false;
                      }
                });  
                 

    后台:创建两个函数来分别接受非文件类型数据和文件类型数据

    //接受普通表单数据
    	@RequestMapping(value = "/doOperate", method = { RequestMethod.POST, RequestMethod.GET })
    	public void doOperate(HttpServletRequest request, HttpServletResponse response) throws ParseException, IOException {
      //根据业务写接收代码  
    }
    //接受文件表单数据
    	@RequestMapping(value="/saveUserExcel",method={RequestMethod.POST,RequestMethod.GET})
    	public void saveContractFile(@RequestParam(value = "file", required = false) MultipartFile file,
    			HttpServletRequest request, HttpServletResponse response) throws Exception {
      //根据业务写接收代码      
    }
    

      

  • 相关阅读:
    复杂模拟 | 1017 模拟N个顾客M个柜台进行排队
    徒手实现lower_bound和upper_bound
    树状数组 | 1057
    动态规划 | 最长回文子串 1040
    动态规划 | 背包问题 1068
    动态规划 | 对输入进行hash处理的LIS 1045
    总结那些有默认margin,padding值的html标签
    javascript 的七种基本数据类型
    牛客网笔试题整理
    JavaScript 的数据结构与算法
  • 原文地址:https://www.cnblogs.com/grj0011/p/7216319.html
Copyright © 2011-2022 走看看