AJAX를 이용한 비동기 파일업로드(View에서 컨트롤러로 데이터전송)

AJAX를 이용한 비동기 파일업로드(View에서 컨트롤러로 데이터전송)

View상에서 비동기적으로 파일업로드를 할수있는 기능을 추가하는 구상하는중 Formdata() 객체를 이용한 방법을 알게되었다. FormData() 객체를 사용하는 것인대 IE9부터 지원된다.

    <form action="upload" id="uploadForm" method="post" enctype="multipart/form-data">
        <input type="file" name="file" id="file" style="display:none"/>
    </form>

form태그에서 주목해야 할점은 enctype="multipart/form-data" 이다. form 에 form-data 형식의 데이터를 가져와서 사용할 것이다.

function uploadFile() {
         var form = new FormData(document.getElementById('uploadForm'));
         $.ajax({
           url: "uploadgo", //컨트롤러 URL
             data: form,
             dataType: 'json',
             processData: false,
             contentType: false,
             type: 'POST',
             success: function (response) {
               alert("success");
               console.log(response);
             },error: function (jqXHR) {
               alert(jqXHR.responseText);
             }
   
    });
}
​

form 태그에서 form-data를 가져와 formdata() 객체로 만들어 전송한다.

저 데이터를 바이너리코드로 바꾸어 DB에 저장할수도 있고, FileObject 객체를 사용하여 파일자체를 보낼수도 있다. 컨트롤러에서는 개발자가 원하는 방법으로 데이터를 처리하면된다.

파라미터 중 dataType, processData, contentType 을 보자.

dataType 은 내가 보내는 데이터의 타입이 아니고 서버가 응답(response)할 때 보내줄 데이터의 타입이다. 이는 success function 에 전달될 argument 의 형태를 지정하는데 사용된다고 한다. (참고)

processData 관련하여, 일반적으로 서버에 전달되는 데이터는 query string 이라는 형태로 전달된다.

data 파라미터로 전달된 데이터를 jQuery 내부적으로 query string 으로 만드는데, 파일 전송의 경우 이를 하지 않아야 하고 이를 설정하는 것이 processData: false 이다.

contentType 은 default 값이 "application/x-www-form-urlencoded; charset=UTF-8" 인데, "multipart/form-data" 로 전송이 되게 false 로 넣어준다. false 로 넣어주는 것이 언뜻 이해가 안되서 false 말고 "multipart/form-data" 를 넣어봤는데 boundary string 이 안들어가게 되어 제대로 동작하지 않았다.

파일을 전송해보면 content-type header 가 아래와 같이 설정된다.

Content-Type:multipart/form-data; boundary=----WebKitFormBoundarybuOGBs9coioS5Kb9

Reference

http://repacat.tistory.com/38