form 에 있는 파일을 ajax로 업로드하기

jquery와 ajax를 이용해 form 에 업로드한 파일을 submit 이 일어나지 않도록 제어하면서 ajax로 전송해야 하는 상황이 생겼습니다. 기존에는 jquery.form.js 를 이용해서 처리했었는데 jquery3 버전으로 넘어오면서 더이상 지원이 안되 아래 방식으로 변경하게 됬습니다.

 

일단 file을 업로드할 html form을 준비해줍니다

<form id="test_upload" enctype="multipart/form-data">
    <input type="file" name="test_file" id="test_file">
    <input type="submit">
</form>

 

jquery를 이용해서 form submit 이 일어날때 form에 업로드한 파일을 FormData 이 담고 ajax로 업로드

$("#test_upload").on("submit", function (event) {
	  const test_file = $("#test_file")[0]; // 가져올 업로드 파일

	  // FormData를 이용하여 파일 담기
	  const formData = new FormData();
	  formData.append("test_file", test_file.files[0]);		
	  
	  // ajax를 이용해 전송
	  $.ajax({
	    type:"POST",
	    url: "/uploadTest.do",
	    processData: false,
	    contentType: false,
	    data: formData,
	    success: function(responseText, statusText, xhr){
	    	console.log("업로드 완료);
	    },
	    err: function(err){
	      console.log("업로드실패");
	    }
	  });
		
	  return false; // submit 이 일어나지 않도록 return false 로 처리
	});