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?