ajax 와 FormData를 이용한 비동기 파일 업로드

비동기 업로드를 하기 위해 ajax와 FormData를 이용하는 방법이다.

 

FormData 는 IE10버전부터 지원한다.

 

FormData 사용 시 주의점

contentType, processData 옵션을 false로 설정해야 함.
- 왜 false로 주는것인가? ajax로 브라우저에 보낼 때 contentType, processData 설정이 없으면 모두 디폴트로 보냄(true) -> 브라우저 디폴트는 form형식으로 보내는 것임. -> 파일 전송할 때 encType: multipart로 보내야 하므로 꼭 contentType, processData를 false로 해야함.

 

FormData 사용방법 두가지

1) Form에 작성된 전체 데이터 보내기

2) Form에 작성된 것 중 필요한 것만 선택하여 보내기

 

FormData - 1) Form에 작성된 전체 데이터 보내기

-form 부분

<form id="formData">
	<input type="file" id="picture" name="picture" />
</form>

<script>
var url = "xxx.do";
var formData = new FormData($('#form')[0]);
$.ajax({
	url : url,
    type : 'post',
    data : formData,
    cache : false,
    contentType : false,
    processData : false,
    success : function(data){
    
    },
    error : function(xhr){
    
    }
});
</script>

 

FormData - 2) Form에 작성된 것 중 필요한 것만 선택하여 보내기

- script 예시

<script>
var formData = new FormData();
formData.append([key],[value]);
</script>

<form id="formData">
	<input type="file" id="picture" name="picture" />
</form>

<script>
var url = "xxx.do";
var formData = new FormData();
formData.append("picture", $("#picture")[0].files[0]);

$.ajax({
	url : url,
    type : 'post',
    data : formData,
    cache : false,
    contentType : false,
    processData : false,
    success : function(data){
    
    },
    error : function(xhr){
    
    }
});
</script>

FormData - 2) Form에 작성된 것 중 필요한 것만 선택하여 보내기 - 파일이 여러개

<form id="formData">
	<input type="file" id="picture" name="picture" />
</form>

<script>
var url = "xxx.do";

var fileRepository = [];
$('input[type="file"]').on('change',function(){
	fileRepository.push(this.files[0]);
});

var formData = new FormData();
formData.append("pictures", fileRepository);

$.ajax({
	url : url,
    type : 'post',
    data : formData,
    cache : false,
    contentType : false,
    processData : false,
    success : function(data){
    
    },
    error : function(xhr){
    
    }
});
</script>