[jQuery] ajaxForm을 이용한 ajax 파일 업로드

jquery.form.min.js

jquery-3.2.1.min.js

이전에 formData를 이용한 ajax 파일 업로드에 대해 포스팅 한 적이 있다.
당시에 formData는 IE9에서 지원이 되지 않는등의 문제가 있다고 말씀드렸는데, 오늘은 그 대안으로 ajaxForm 플러그인을 소개한다.

현재로서는 ajax로 파일을 업로드할때 가장 널리 사용하는 방법이 아닐까 싶다.

<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="jquery.form.min.js"></script>

<script>
	
	function upload(){
		$("#frm").ajaxForm({
			url : "/upload.do",
			enctype : "multipart/form-data",
			dataType : "json",
			error : function(){
				alert("에러") ;
			},
			success : function(result){
				alert("성공") ;
			}
		});

		$("#frm").submit() ;
	}

</script>


<form name="frm" id="frm" method="post" enctype="multipart/form-data">
	<input type="file" name="upfile" id="upfile">
</form>


<a href="javascript:upload();">등록</a>

참고로 오래전에 리턴받는 데이터에 개행문자가 포함되어 있을경우 정상적으로 리턴데이터를 받아오지 못하는 버그가 있었던걸로 기억한다.
이 부분에 대해선 주의할 필요가 있을 듯 싶다.(지금은 개선이 되었는지도 ...)


참고 : http://malsup.com/jquery/form/