클라이언트에서 파일을 업로드할 경우 ajax 즉, 비동기 방식으로 업로드는 하는 방법을 알아봅니다. 어떻게 하면 그리고 왜 비동기식 파일 업로드가 필요할까요?



# AJAX를 사용한 파일 업로드 알아보기예전에는 주로 form 태그에 몇 가지 속성을 사용하여 submit 방식으로 파일 업로드를 수행하였습니다. 하지만 최근에는 업로드하는 경우 AJAX 방식을 사용한 비동기식 파일 업로드가 많이 사용됩니다. 특히 SPA(Single Page Application)의 경우 더욱 더 많이 사용되지요. 이 경우 blob 방식으로 변환하는 방법도 있고 아니면 FormData 객체를 사용할 수 있습니다. 아래는 FormData 객체를 사용하는 방법을 알아봅니다.


! ajax 방식의 파일 업로드 자바스크립트에서 구현하기파일 업로드를 위해서 FormData 객체를 사용해보겠습니다. FormData는 간편하게 업로드 할 데이터를 추가하거나 관련 Object를 콘트롤할 수 있는 내장객체입니다. 그럼 먼저 예제를 하나 만들고 파일 업로드를 직접해보도록 하겠습니다. 간단한 html이 필요하겠죠?

@ fileupload.html
<form>
  파일 추가하기 <input type="file" id="myFile" />
</form>

<button onclick="uploadFile();">파일 업로드</button>

이제 스크립트를 사용하여 '파일 업로드' 버튼을 클릭하면 input 태그에 추가된 파일이 업로드되어야할 것입니다. 아래는 자바스크립트 코드입니다. 

@ fileupload.js
uploadFile = function() {
  var file = document.getElementById('myFile');
  var filedata = new FormData(); // FormData 인스턴스 생성

  if (!file.value) return; // 파일이 없는 경우 빠져나오기

  filedata.append('uploadfile', file.files[0]);

  var _xml = new XMLHttpRequest();
  _xml.open('POST', '/api/test_upload/', true);
  _xml.onload = function(event) {
    if (_xml.status == 200) {
      alert('Uploaded');
    }
    else {
      alert('Error');
    }
  };

  _xml.send(filedata);
};


! 예제코드 설명
파일을 input 태그에 추가하여 버튼을 클릭하면 서버에 비동기 방식으로 전송하고 그 결과를 출력하는 예제입니다. 파일을 담기 위해서 FormData객체를 사용하였으며 append() 메소드는 전달할 파일이나 다른 데이터를 추가할 수 있습니다.

5번째 줄은 파일이 첨부되지 않은 경우 동작하지 않도록 return 값을 추가하였습니다. 그리고 통신에 관련된 부분은 그 아래부터로 9번째 줄은 XML 객체를 생성하여 POST 메소드로 주소 '/api/test_upload/'에 request 요청을 보냅니다. onload() 에서 response를 받아 성공 또는 실패시 callback 함수를 실행하는데 성공할 경우 'Uploaded' 메시지를... 아니면 'Error' 메시지를 나타내고 끝나게됩니다.



# 마치면서
여기까지 ajax를 사용하여 비동기 방식으로 파일 업로드하는 방법을 알아봤습니다. 여기서 중요한 부분은 FormData 그리고 XMLHttpRequest 객체를 사용한다는 점입니다.

참고로 FormData 객체를 사용하기 위해서는 구 버전은 지원되지 않을 수 있습니다. IE의 경우 IE 10 이상 부터만 가능한 방법임을 알아두시기 바랍니다. 참고로 이를 해결하는 방법으로 기존 방식을 이용하되 iframe을 사용하기도 합니다.