[javascript] 비동기적,비동기 파일 업로드 - jquery.form

jquery.form 플러그인은 form을 비동기적으로 submit할 때 사용합니다.

Spring MVC와 CommonsMultipartResolver를 사용하며 파일을 업로드하려고 합니다.

<input type="file"> 태그를 사용해서 파일을 업로드하는데,

form을 submit하면, 기본적으로 페이지가 이동합니다. 

하지만 저는 업로드할 때 페이지 전환이 이루어지지 않도록 하고 하고 싶습니다.

찾은 방법은 1. 이동한 페이지 원래 페이지로 리다이렉팅, 2. 비동기적으로 파일 전송.

기본적으로 jquery를 사용하고 있기 때문에, jquery form 플러그인을 사용하기로 했습니다.

이벤트 처리하기도 편할 것 같습니다.

일단 당연히 form이 있어야 하죠. enctype을 반드시 지정해야 합니다.

<form id="uploadForm" name="uploadForm" action="#" method="post" enctype="multipart/form-data">
  <input type="file" id="fileInput" name="fileInput" />
</form>	 

페이지가 로딩될 때, 해당 form이 ajax로 전송될 수 있도록 하기 위해 다음과 같이 ajaxForm()을 실행합니다.

$(document).ready(function() {
  $("#uploadForm").ajaxForm();
}

이제, 다음과 같이 form을 submit 합니다. 이 때 ajaxSubmit() 함수를 사용합니다.

플러그인 도큐먼트를 보시면 아시겠지만, 다음과 같이 ajax에 사용하는 파라미터들을 사용할 수 있습니다. 

매우 편리하네요. :)

function csvUpload() {
  $("#uploadForm").ajaxSubmit({
    statusCode: {			
      400: function() {
        alert("파일 내용이 잘못되었습니다.");
      },			
      500: function() {
        alert("파일을 업로드할 수 없습니다.");
      }
    },						
    success: function(data) {
      alert("업로드 되었습니다. 페이지를 다시 읽습니다.");
      window.location.reload(true);
    }
  });
}

참고.

http://jquery.malsup.com/form/