[Spring boot] FormData를 활용한 ajax 이미지 값 넘기기

ajax방식은 비동기처리로 화면의 전환없이 이루어지는 데 강점이있다. form태그를 이용해 값을 전달하는 방식 대신 ajax를 통해 서버에 제출하는 방식이다. 이러한 ajax는 이미지 같은 멀티미디어 파일을 페이지 전환 없이 비동기로 제출 하고 싶을 때,formData 객체를 사용해야한다. 이 때 객체를 생성하고 var form=new FormData(); 값을 추가해 주는데 form.append('key','value') 이는 input을 통해 입력하는 것과 같은 역할을 한다. 또 반드시 processData:false, contentType:false 를 설정해주어야 하는데 이 때 값은 자동으로 '문자열'이 되니 객체나 배열을 넣을 수 없음을 주의하자.

photo를 비동기 방식으로 변경하는 ajax

$("#photo").change(function(){
			var num=$(this).attr("num");
			
			var form=new FormData();
			form.append("photo",$("#photo")[0].files[0]); 
            //이름 , 밸류값 삽입 /선택한 1개만 추가
			form.append("num",num);
			
			console.dir(form);
			//dir, 는 오브젝트를 기록하기 전에 복사본을, log는 참조를 콘솔에 전달
            
			$.ajax({
				type:"post",
				dataType:"html",
				data:form,
				url:"update",
                
				processData:false,
				//Jquery 내부적으로 쿼리 스트링을 만들어 data 파라미터를 전송한다. 파일 전송에서는 이를 피해야 한다.
              
                contentType:false,
				//content타입은 기본적으로 default가 application/x-www-form-urlencoded다. 이는 key=value&key=value 형태를 뜻한다. 따라서 false를 설정한다.

				success:function(){
					location.reload();
				}
				
			});
		});

controller

@PostMapping("/member/update")
@ResponseBody
public void photoUpload( String num,MultipartFile photo,
						HttpSession session) {
			
//경로
String path=session.getServletContext().getRealPath("/photo");

//파일명
SimpleDateFormat sdf=new SimpleDateFormat("yyyyMMddHHmmss");
String filename="f_"+sdf.format(new Date())+photo.getOriginalFilename();
			
//업로드
try {
		photo.transferTo(new File(path+"/"+filename));
				
		service.updatePhoto(num, filename);
	} catch (IllegalStateException | IOException e) {
		// TODO Auto-generated catch block
	e.printStackTrace();
		}
	}
		

ajax에서 return값이 없을 경우 map방식을 사용할 필요가 없다. 업데이트 시 사진저장 메서드에 포토파라메터를 재 정의한 filename을 넣는다.