<form name='frm' id='frm'>
<input name="file_arr[]" type="file">
<input name="file_arr[]" type="file">
<input name="file_arr[]" type="file">
</form>
<script>
var formData = new FormData($('#frm')[0]);
$.ajax({
url: 'url',
processData: false,
contentType: false,
data: formData,
type: 'POST',
success: function(msg){
alert( msg );
}
});
</script>
ajax로 파일을 업로드 시에 업로드 된 파일 데이터를 넘겨주려면 위와 같은 방식으로 해야 한다.
여기에서 주의깊게 봐야 하는 것이 몇가지 있다.
1. 우선 해당 폼은 ajax로 값을 넘기기 때문에 form에 enctype="multipart/form-data"을 넣어주지 않아도 된다. 하지만 해당 타입을 ajax로 넘겨줄때 설정해 주어야 한다. 자세한 사항은 아래에 나온다.
2. FormData : ie10부터 사용가능한 것으로 해당 폼의 모든 값들(file까지도)을 해당 객체에 한큐에 넣어서 보내는게 가능하다.
3. processData : 기본 값은 true이다. 해당 값이 true 일때는 data 값들이 쿼리스트링 형태인 key1=value1&key2=value2 형태로 전달 된다. 하지만 이렇게 하면 file값들은 제대로 전달되지 못한다. 그래서 해당 값을 false로 해주어 {key1: 'value1', key2: 'value2'} 형태로 전달 해주어야 file값들도 제대로 전달 된다.
4. contentType : 기본값은 'application/x-www-form-urlencoded'이다. 해당 기본 타입으로는 파일이 전송 안되기 때문에 false로 해주어야 한다.