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

@@ -10,21 +10,37 @@
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>    
 	<script>
-		$(document).ready(function(){
+		$(document).ready(function() {
-			$('#add').on('click', function(){
+			$('#add').on('click', function() {
-				$.ajax({
+				
-		            url: "/profile/user/10",
+			    var formData = new FormData(); 
-		            type: "POST",
+				formData.append("name", $('#name').val()); 
-		            //contentType : 'application/json; charset=UTF-8',
+				//formData.append("name", "test1");
-		            //dataType: "json",
+				formData.append("phone", "test1"); 
-		            data: $('#theForm').serialize(),
+				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({
+					type: "POST",					
+					url: '/profile/user/10', 
+					/* data: $('#theForm').serialize(), */
+					data: formData,
+					contentType: false,  
+					processData: false,
+					
 		            success: function(data){
 		                //location.href="listUser.do";
 		            	alert("신규등록 OK");
 		            },
 		            error: function(error, status, msg) {
 		            	alert("Error " + msg);  
-		            	}
+		            }
 		        });
 		    });
 		});	
@@ -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>