此时可以通过做两次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 { //根据业务写接收代码 }