파일 업로드시 다중 파라미터 전송하기

파일을 업로드해 서버로 넘길 때 다른 값들도 함께 넘겨주는 방법을 알아보자~!
(Javascript -> Java)

소스 코드

HTML

파일을 업로드하기 위한 버튼을 만들어 준다.
form의 enctype과 input type을 다음과 같이 지정해줘야 한다.

<form id="frmAttachedFiles" class="form-horizontal" enctype="multipart/form-data"">
	<div class="btn btn-primary btn-file">
		<i class="fa fa-paperclip"></i> Upload테스트
		<input type="file" id="upload" name="upload">
	</div>
</form>

Javascript

파일을 업로드하면 fnUpload()가 실행된다.
FormData를 생성할 때 HTML에서 지정한 form id를 입력해 파일을 받아온다.
💡 form.append를 사용해 필요한 파라미터들을 추가해준다.
ajax로 파일 전송시 dataType, processData, contentType, enctype을 다음과 같이 지정해줘야 한다.

// upload 했을 때
$("#upload").on("change", function() {
	fnUpload();
});

function fnUpload() {
	let form = new FormData($("#frmAttachedFiles")[0]);
	form.append("name", "테스트");
	
    let apiUrl = "/uploadTest.do";
	$.ajax({
		url : apiUrl,
		type : "POST",
		data : form,
		dataType: "json",
		processData: false,
		contentType: false,
		enctype : 'multipart/form-data',
		success: function(result) {
			Alert("성공");
		}
	});
}

Java -> Controller

❗ Controller에서 MultipartHttpServletRequest로 요청을 받아온다.
file은 request.getFile(), 파라미터들은 request.getParameter() 형식으로 가져올 수 있다.

@PostMapping(value="/uploadTest.do")
public ResponseEntity<RestResultVO> uploadTest(MultipartHttpServletRequest request, HttpServletResponse response) throws Exception
{
	MultipartFile file = null;
	Iterator<String> iterator = request.getFileNames();
	if (iterator.hasNext()) {
		file = request.getFile(iterator.next());
	}    
    String name = request.getParameter("name");
    
    ...
}