Ajax发送多部分/表单数据

My html code:

<form:form name="vcfForm" id="vcfForm" method="post" enctype="multipart/form-data" action="../acquaintance/readingContactsFromVcfFile"></form:form>

<input type="file" name="vcfFile" id="vcfFile" form="vcfForm" >
    <button type="button" name="vcfSubmit" id="vcfSubmit" form="vcfForm">Upload</button>

My controller :

@RequestMapping(value = { "/readingContactsFromVcfFile" }, method = RequestMethod.POST)
public @ResponseBody
ModelMap readContactsFromVcfFile(@RequestParam("vcfFile") MultipartFile file, HttpServletRequest request) throws UserServiceException {
    ModelMap modelMap = new ModelMap();
  *********************code*****************
  modelMap.addAttribute("message", "success");
  return modelMap;
}

My jquery code:

 $(document).on('click','#vcfSubmit', function() {
                        var vcfData = new FormData(); 
                        vcfData.append('files[]', $('#vcfForm').get(0).files[0]);
                        $.ajax({
                            url : "../acquaintance/readingContactsFromVcfFile?vcfFile="+vcfData,
                            type : "post",
                            cache : false,
                            processData: false,
                            contentType: false,
                            success : function(data) {
                            alert(data.message);                                        
                            }
                            });   
                    });  

My problem is when i click submit button the page will submitted and return message "success" displayed in page. I want page not refresh when submitting the form or pass file using ajax. How can i solve this problem?

查看全部
weixin_33698823
weixin_33698823
2014/12/16 09:14
  • ajax
  • javascript
  • forms
  • jquery
  • 点赞
  • 收藏
  • 回答
    私信

1个回复