ajax 로 Form 전송시 첨부파일과 함께 보내기

간단한 Web Form 전송 시에는 대부분 데이터를 $(this).serialize();  을 사용하여 보내면 되지만,

현재 진행 중인 작업 중에 사용자의 입력내용과 첨부파일을 한번에 보내야 하는 상황이 되었다.

 

이것은 일반적인 Form 전송 방법이다.

$("#form").submit(function(e) {

    e.preventDefault(); // 폼의 자체 서브밋 동작을 비활성

    var form = $(this);
    var url = form.attr('action');

    $.ajax({
           type: "POST",
           url: url,
           data: form.serialize(), // 폼 요소 직렬화
           success: function(data)
           {
               alert(data); // 성공시, 결과 데이터
           }
         });

});

이번에는 Form 전송 중에 첨부 파일 기능이 함께 존재한다고 생각해보자.

<form id="form" class="form-horizontal" role="form" method="post"
	enctype="multipart/form-data" action="/home/sinmungowriteForm">
	<input type="text" class="form-control needs-validation" name="writerEmail">
	<input type="file" name="attachFile">
</form>

유의깊게 봐야 할 부분은 form 선언시 enctype 과 method 부분이다. 당연하게도 파일 전송은 Post 방식일 것이고, enctype 은 multipart/form-data 로 보내겠다고 선언해야 한다. 

 

      $("#btn_submit").on("click", function (event) {

        /// event.preventDefault();
        var url = $("#form").attr("action");
        var form = $('#form')[0];
        var formData = new FormData(form);
        
        $.ajax({
          url: url,
          type: 'POST',
          data: formData,
          success: function (data) {
          	alert(data)

          },
          error: function (data) {
            alert(data);
          },
          cache: false,
          contentType: false,
          processData: false
        });

이번에는 놓치면 왜 안되지? 하고 이유를 모른 채 많은 시간을 허비하게 되니 잘 보자.

formData 를 생성해서 data 에 넣어주고, form 에서 enctype="multipart/form-data" , method="POST" 를 확인하고

중요 !! cache , contentType , processData 를 모두 false 로 세팅해준다.

 

이렇게 하면 Controller 단에서 폼 데이터를 받는 VO 객체에 private MultipartFile fileAttach; 를 추가하여 받으면 Form 데이터 한 번 전송으로 파일과 Form 데이터를 한 번에 수신하여 처리 가능해진다.

일반적인 Form Submit 으로 하면 간단하지만, 화면 갱신이나 이동없이 처리하는 방법을 설명했다.

다음에는 그럼 이렇게 보낸 파일을 서버단에서는 어떻게 받아서 저장하고, 다시 클라이언트가 다운로드 받을 수 있게 해주는지를 정리해보고자 한다.

 

개발자의 끊임없는 고뇌