title: Ajax send multipart/form-data
body: <p>My html code:</p>
  
  <pre><code>&lt;form:form name="vcfForm" id="vcfForm" method="post" enctype="multipart/form-data" action="../acquaintance/readingContactsFromVcfFile"&gt;&lt;/form:form&gt;
  
  &lt;input type="file" name="vcfFile" id="vcfFile" form="vcfForm" &gt;
      &lt;button type="button" name="vcfSubmit" id="vcfSubmit" form="vcfForm"&gt;Upload&lt;/button&gt;
  </code></pre>
  
  <p>My controller :</p>
  
  <pre><code>@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;
  }
  </code></pre>
  
  <p>My jquery code:</p>
  
  <pre><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);                                        
                              }
                              });   
                      });  
  </code></pre>
  
  <p>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?</p>