아약스 보내 다중/폼 데이터

Question

내 HTML 코드 :

<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> 

내 컨트롤러 :

@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; 
} 

내 jQuery 코드 :

$(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);           
          } 
          }); 
        }); 

내가 제출 '버튼을 클릭하면 내 문제입니다 페이지가 제출되고 "성공"메시지가 페이지에 표시됩니다. 양식을 제출하거나 아약스를 사용하여 파일을 전달할 때 페이지를 새로 고치지 않습니다. 어떻게이 문제를 해결할 수 있습니까?

Answer 1

html 코드 :

<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> 

컨트롤러 코드 :

@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 코드 :

$(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) { 
           } 
          }); 
        }); 

모든 일이 작업을 잘.