form-data 형식 변경

src/main/java/com/example/demo/controller/UserProfileController.java

@@ -14,6 +14,7 @@ import org.springframework.web.bind.annotation.PathVariable;
 import org.springframework.web.bind.annotation.PostMapping;
 import org.springframework.web.bind.annotation.PutMapping;
 import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.RequestPart;
 import org.springframework.web.bind.annotation.RestController;
 import org.springframework.web.multipart.MultipartFile;
 
@@ -48,9 +49,9 @@ public class UserProfileController {
 	@PostMapping("/user/{id}")
 //	public HashMap<String, Object> putUserProfile(@PathVariable String id, @RequestParam String name,
 //	public void putUserProfile(@PathVariable String id, @RequestParam String name, 
-	public  List<UserProfile> postUserProfile(@PathVariable String id, @RequestParam String name, 
+	public  List<UserProfile> postUserProfile(@PathVariable("id") String id, @RequestParam("name")  String name, 
-			@RequestParam String phone, @RequestParam String address,
+			@RequestParam("phone") String phone, @RequestParam("address") String address,
-			@RequestParam MultipartFile upfile) {		
+			@RequestPart MultipartFile upfile) {		
 		
 		String uuid = UUID.randomUUID().toString();
 		String fileName = upfile.getOriginalFilename();

src/main/webapp/WEB-INF/views/add.jsp

@@ -12,12 +12,28 @@
 	<script>
 		$(document).ready(function() {
 			$('#add').on('click', function() {
+				
+			    var formData = new FormData(); 
+				formData.append("name", $('#name').val()); 
+				//formData.append("name", "test1");
+				formData.append("phone", "test1"); 
+				formData.append("address", "test1");				
+				formData.append("upfile", $("input[name='upfile']")[0].files[0]);
+				/* formData.append("upfile", $('#upfile').files[0]); */
+				
+				for (var pair of formData.entries()) {
+                console.log(pair[0]+ ', ' + pair[1]); 
+            }
+
+			
 				 $.ajax({
-		            url: "/profile/user/10",
 					type: "POST",					
-		            //contentType : 'application/json; charset=UTF-8',
+					url: '/profile/user/10', 
-		            //dataType: "json",
+					/* data: $('#theForm').serialize(), */
-		            data: $('#theForm').serialize(),
+					data: formData,
+					contentType: false,  
+					processData: false,
+					
 		            success: function(data){
 		                //location.href="listUser.do";
 		            	alert("신규등록 OK");
@@ -39,19 +55,23 @@
 <br>
 <br>
 <br>
-	<form id="theForm" method="post" enctype=”multipart/form-data”>		
+	<!-- <form id="theForm" action="/profile/user/10" method="post" enctype="multipart/form-data"> -->
+	<!-- <form id="theForm" method="post" enctype="multipart/form-data">		
 		<table>            
             <tr>                
                 <td>Name <input type="text" id="name" name="name" value="50"/><br></td>
                 <td>Phone <input type="text" id="phone" name="phone" value="50"/><br></td>
                 <td>Address <input type="text" id="address" name="address" value="50"/><br></td>                
                 <td>File<input type="file" id="upfile" name="upfile" ></td>
-                <td><input id="add" type="button" value="Send"/></td>
+                <td><input id="add" type="submit" value="Send"/></td>
             </tr>
         </table>
-	</form> 
+	</form> --> 
-	  
 	  
+	   	Name <input type="text" id="name" name="name" value="50"/><br>
+	  	File<input type="file" id="upfile" name="upfile" >
+  		<button  id="add" type="button" class="btn btn-primary">Submit</button>
 
 </body>
+<iframe name='blankifr' style='display:none;'></iframe>
 </html>