[Javascript] AJAX (XMLHttpRequest)로 비동기적으로 파일 업로드하기

[자바스크립트] Uploading file with AJAX (XMLHttpRequest)

: 지금까지 웹 언어들을 사용할 때 파일을 업로드 할때에는 form과 input type="file"을 이용해왔다.

<form enctype="multipart/form-data" action="_URL" method="POST" id="upload_form">

      <input type="hidden" name="MAX_FILE_SIZE" value="300000" />

      <input type="file" id="upload_file" />

      <input type="submit" value="파일 전송" />

</form>

: 위의 구현은 php.net에 있는 내용을 가져온 것으로 <form method="post"> 태그 안에 단순히 form을 submit하는 것만으로 쉽게 구현이 가능했지만, 이러한 방법은 페이지 새로 고침(refresh) 현상을 유도하게 되고 이는 사용자 경험에 있어서 마이너스가 된다. (비동기를 적용하게 되는 것은 클라이언트 쪽이니까 서버측 구현은 일단 무시하자.)

: 하지만 이러한 방법이 이제 어려워지는 가장 큰 이유는 바로 HTML5를 적용한 웹페이지들이 많아지면서 일 것이다. HTML5에서 HTML은 MVC 모델에서 철저하게 V에 해당하며 html 파일 안에 다른 웹 언어를 넣는 것이 지양되고 있다.

: 그렇다면 순수하게 HTML과 Javascript를 이용해서 파일을 업로드하는 방법이 있어야하는데 XMLHttpRequest를 이용하면 이를 쉽게 할 수 있다.

: 방법은 간단하게 XMLHttpRequest의 send() 함수에서 인자로 FormData를 넘겨주면 된다. FormData를 구성하는 방법은 위의 소스와 같이 html로 되어있는 경우는 아래와 같이 구현하면 된다.

<script>

    var form = document.getElementById("upload_form");

    var formData = new FormData(form);

    var xhr = new XMLHttpRequest();

    xhr.open("POST" , "/upload/request_url" , true);

    xhr.send(formData);

</script>

: 이렇게 하면 upload_form의 id를 가진 form을 가져와서 해당하는 form의 정보들을 이용해서 FormData 클래스를 만들고, 이를 XMLHttpRequest에서 요청하는 url로 POST method로 첨부를 하게 된다.

: 만약에 하나의 커다란 form 전체가 아니라 파일 하나를 첨부하고 싶다면 아래와 같이 하면 된다.

<script>

    var fileInput = document.getElementById("upload_file");

    var file = fileInput.files[0];

    var formData = new FormData();

    formData.append("upload_file" , file);

    var xhr = new XMLHttpRequest();

    xhr.open("POST" , "/upload/request_url" , true);

    xhr.send(formData);

</script>

: 이렇게 하면 url로 건내주는 데이터의 양이 최소화 되므로, 자그마한 트래픽 최적화를 원한다면 이렇게 하는 것도 좋을 것이다.

* 활용 방법

: 위의 자바스크립트를 기존의 동작들이나 html과 일관성을 가지고 input type="submit"을 활용하고 싶다면, form의 onsubmit 이벤트에 위의 소스를 넣어서 처리하면 된다.

var form = document.getElementById("upload_form");

form.onsubmit = function()

{

    var formData = new FormData(form);

    formData.append('upload_file' , upload_file);

    xhr.open("POST" , form.getAttribute("action") , true);

    xhr.send(formData);

    return false;    //중요! false를 리턴해야 버튼으로 인한 submit이 안된다.

}

 : XMLHttpRequest를 이용해서 progress바를 표시하여 현재 진행 상황 등을 보여주는데 응용할수도 있다. 아래와 같이 간단하게 진행 상태를 확인할 수 있다.

xhr.onprogress = function(evt){

    someDiv.innerHTML = evt.loaded + "/" + evt.total;

};

: 이를 이용한 응용은 다음에 다룰 수 있으면 다뤄볼 것이다. HTML5의 slider나 canvas를 이용하면 그래픽적으로 파일 업로드/다운로드 진행바를 구현하는 것도 아주 쉬운일이다.

끝.