웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
클라이언트에서 파일을 업로드할 경우 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 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);
};
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을 사용하기도 합니다.
아래의 글도 찾고 계시지 않나요?
- [자바스크립트] axios를 사용하여 비동기 호출시 try catch 구문에서 404 에러의 response를 처리하는 방법
자바스크립트 Canvas 요소를 이미지로 저장 후 서버에 ajax로 저장하는 방법
자바스크립트 FormData 데이터 전송 알아보기
제이쿼리 when() 메소드 알아보기- jquery post method
자바스크립트 이미지핑 기술 알아보기- AngularJS에서 $http 요청 제어 및 취소하는 방법과 예제보기
- CKEDITOR를 사용하여 AJAX 데이터를 에디터에 추가하는 방법
- 제이쿼리 ajax 사용시 timeout 대기시간 설정하는 방법은?