javascript - Ajax send multipart/form-data -

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 when click submit button page submitted , return message "success" displayed in page. want page not refresh when submitting form or pass file using ajax. how can solve problem?

html code:

<form name="vcfform" id="vcfform" method="post" enctype="multipart/form-data" ></form> <input type="file" name="vcffile" id="vcffile" form="vcfform" >     <button type="button" name="vcfsubmit" id="vcfsubmit" form="vcfform">upload</button> 

controller code:

@requestmapping(value = { "/readingcontactsfromvcffile" }, method = requestmethod.post) public @responsebody modelmap readcontactsfromvcffile(@requestparam(value = "vcffile") multipartfile file, httpsession session) throws userserviceexception {     modelmap modelmap = new modelmap();     modelmap.addattribute("message", "message");     return modelmap; } 

jquery code:

$(document).on('click','#vcfsubmit',function(){                          var vcfdata = new formdata($('#vcfform')[0]);                            $.ajax({                                 url : "../acquaintance/readingcontactsfromvcffile?vcffile="+vcfdata,                                 type : "post",                                 data : vcfdata,                                 processdata: false,                                 contenttype: false,                                 cache : false,                                 success : function(data) {                                 }                             });                        });  

every thing working fine.