파일데이터 비동기 전송하기

파일데이터 비동기 전송하기

---

1. form에 enctype 설정하기

content-type를 아래와 같이 설정해야 한다.
enctype="multipart/form-data"

2. js에서 form 값 가져와서 비동기로 서버에 전송하기

function image_Save(){
	
	var regfrm = document.regForm; // form 값 가져오는 방법1
	var FILEURL = regfrm.FILE_URL.value;
	
	if(FILEURL == "" ) { // 유효성검사도 해주었다.
		alert("파일을 선택하세요.");
		return;		
	}
	
	var frm = new FormData($('#regForm')[0]); // form 값 가져오는 방법2
	
    $.ajax({
        url: '/img/imageReg.ajax', //보낼 곳
        data: frm,
        contentType: false, //중요
        processData: false, //중요
        type: 'POST',
        success: function(data){
			alert(JSON.parse(data).message); //서버에서 결과값 받음
        }
	}); 
}

3. 서버에서 받기
MultipartFile 인터페이스로 데이터를 받아 사용하였고, 여러개는 리스트로 받았다.

---

추가공부

[ 참고 : https://caileb.tistory.com/152]
스프링에서 제공하는 MultipartFile 클래스와 MultipartHttpServletRequest 클래스 사용해서 파일업로드 기능 구현할수 있음
(파일업로드에서 서버 요청은 multipart/form-data로 해야함)

컨트롤러에서 받는 3가지 방법

1. @RequestParam 어노테이션과 MultipartFile 타입으로 받기

요청 메시지에서 파라미터들이 분리되어 들어오므로 골라서 사용 가능하나
파일 외에 다른 타입 추가해서 받으면 코드가 지저분해질 수 있음

2. MultipartServletRequest 또는 HttpServletRequest 타입으로 받기

요청메시지 자체를 컨트롤 하므로 메시지 안의 파라미터를 뜯어내야 함
(MultipartHttpServletRequest와 MultipartFile로 파일 추출가능) -> 양이 많으면 지저분해질 수 있음

3. 사용자 정의 Class 타입으로 받기

요청 파라미터 타입을 사용자가 정의한 클래스 타입으로 사용(커맨드 객체라고 부름)
미리 만들어 두어야 하는 귀찮음 있지만,
클래스 구조에 맞게 파싱되므로 객체로 컨트롤 가능하고 코드 깔끔해질 수 있는 장점(MultipartFile 타입을 클래스에 작성해두면 됨)