通过Ajax提交form表单来提交上传文件


 Ajax 提交form方式可以将form表单序列化 然后将数据通过data提交至后台,例如:


  1. $.ajax({  
  2.      url : "http://localhost:8080/",  
  3.      type : "POST",  
  4.      data : $( '#postForm').serialize(),  
  5.      success : function(data) {  
  6.          
  7.      },  
  8.      error : function(data) {  
  9.         
  10.      }  
  11. });
但是这种方式如果表单中有需要提交的文件类型 这样则不行 后台接不到数据。

解决办法:使用 FormData。这里使用jquery 最好使用2.0版本之后 之前应该不支持。例如:

<form id="form">
   <P class="p5"><span><i>*</i>商户证书:</span>
      <input type='text' name='apiclientType' id='textfield' class='w_txt' >
      <input type='button' class='w_btn' value='上传证书' />
      <input type="file" name="fileField" class="w_file" id="fileField" size="28" οnchange="document.getElementById('textfield').value=this.value" />
   </P>

</form>



var formData = new FormData(document.getElementById("form"));//表单id
$.ajax({
   url: '${ctx}/wmManage/saveWeixinConfig.do' ,
   type: 'POST',
   data: formData,
   async: false,
   cache: false,
   contentType: false,
   processData: false,
   success: function (result) {
    
   }
});

附上后台数据接收:

@RequestMapping("/saveWeixinConfig")
@ResponseBody
public ResultMsg saveWeixinConfig(@RequestParam(value = "fileField",required = false)MultipartFile fileField) throws IOException {
    
    return "";
}



版权声明:本文为xiao______xin原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。