jQuery - Ajax 파일 업로드

AJAX 로 파일을 전송할 수 있는 예제입니다. FormData() 객체는 IE10 부터 사용할 수 있습니다.

test.php 파일에는 아래 내용으로 작성되었다는 가정에서 설명합니다.

<?php
print_r($_POST);
print_r($_FILES);
?>

요청 코드는 다음과 같습니다.

<script>
$(function(){
 $("button").click(function(){

   var isData = new FormData($('#frm')[0]);
   $.ajax('test.php', {
     processData: false,
     contentType: false,
     cache: false,
     data: isData,
     type: 'POST',
     success: function(data){
       $("#user").html(data);
     }
   });
 });
});
</script>

<form name='frm' id='frm'>
  <input name="name" type="text">
  <input name="user_file[]" type="file">
</form>

<button>폼 전송</button>
<div id="user"></div>

processData 는 key1=val1&key2=val2 형식의 쿼리 문자열로 전송하는데, 쿼리 문자열로 전송하면 파일 업로드가 되지 않습니다. 따라서 false로 설정해야 하고, contentType 의 기본값은 application/x-www-form-urlencoded 입니다. 기본적으로 파일을 업로드 하려면 ‘multipart/form-data’ 이어야 하므로 false 로 설정합니다. 마지막으로 cache 는 파일을 업로드하는 부분이어서 캐시하지 못하도록 false 로 설정해 주었습니다.

FormData() 객체에 .append() 를 이용해 파일을 전송하는 방법이 있습니다. 여기서 첨부파일 이름은 'user_file' 입니다.

var isData = new FormData($('#frm'));
isData.append('user_file', $("input[type=file]")[0].files[0]);

$.ajax('test.php', {
  processData: false,
  contentType: false,
  cache: false,
  data: isData,
  type: 'POST',
  success: function(data){
    $("#user").html(data);
  }
});

contentType 에 multipart/form-data 를 직접 설정해야 하는 경우 다음과 같습니다.

var isFrm = document.getElementById('frm');
isFrm.method = "POST";
isFrm.enctype = "multipart/form-data";

var isData = new FormData(isFrm);

formData() 는 IE 10부터 지원하기 때문에 아래 방법으로 확인할 수 있습니다.

if(window.FormData !== undefined){
  var isData = new FormData();
  ...
}