[jQuery] Ajax를 이용하여 파일 전송하기(Ajax File Upload)

이전에 jquery에 serialize()  메소드를 이용하여 Form 데이터를 Ajax로 전송하는 부분에 대해 포스팅한 적이 있다.
오늘은 단순 form 데이터가 아닌 File을 Ajax로 전송하는 방법에 대해 간단하게 알아보자.

아래 예저는 FormData()를 이용하여 Ajax로 파일을 전송하는 예제이다.

<script>
 
    function to_fileUp_ajax(){
  
	var formData = new FormData();
	formData.append('uploadFile', $('uploadFile')[0].files[0]);
	
 
        $.ajax({
            type : 'post',
            url : '/test.jsp',
            data : formData,
            dataType : 'json',
	    processData : false,
	    contentType : false,
            error: function(xhr, status, error){
                alert(error);
            }
            success : function(json){
                alert(json)
            },
        });
  
    }
 
 
</script>

<form name="testForm" id="testForm">
    <input type="file" name="uploadFile" id="uploadFile" />
</form>

참고로 FormData()를 이용한 방법은 IE의 경우 IE9 이하에선 동작하지 않는다.

그 외의 브라우저에서는 모두 정상동작(망할 IE). IE 버전에 상관없이 ajax를 이용한 파일 전송은 다음에 포스팅 하도록 하겠다.