본문 바로가기
DOM, Script

uploadify를 사용한 ajax 파일 업로드 처리

by eqzero 2011. 8. 2.

ajax가 웹에 많은 발전을 기여 한게 사실이지만 파일처리에 있어서는 항상 걸림돌이였다.
우선 먼저 짚고 넘어가야할게 ajax에서는 XMLHttpRequest프로토콜을 사용하는데 알다시피 파일업로드는 되지 않는다.
그렇다면 제목에서 말하는 ajax 파일 업로드가 과연 맞는것인가에 대한 의문이 드는게 사실인데..
혹자는  XMLHttpRequest을 사용하지 않는다면 결국 자바스크립트일뿐이라고도 한다.
(기존에 비슷한 기능을 iframe으로 구현을 많이 했으니 틀린말은 아니군요..)
하지만 결국 비동기식으로 보이게끔(-_-;) 구현을 해주니 ajax파일업로드라 하겟다..;;;..

파일업로드를 ajax방식으로 처리해주는 스크립트 라이브러리는 여러개가 있다.
jQuery가 유행하다보니 유난히 jQuery플러그인식으로 많이들 나오는거 또한 사실이다..
그중에서도 이번에 사용한 파일업로드 스크립트 라이브러리는  "uploadify" 로서
내부적으로 플래쉬 파일 업로드라이브러리인
"SWFUpload"를 내부적으로 포함해서 결과적으로 플래쉬파일을 사용해서 업로드를 처리하고있다.

우선 다운로드는 여기 == >   ["uploadify" 다운]
필자는 현재 최신버젼이지만 베타판인 -_-. .3.0.0 버젼으로 작업을 해보았다.
uploadify-v3.0.0.zip 파일을 풀어보면 샘플을 php기준으로 작성되어있는데 필자는 jsp 기반으로 작성해보았다.
우선 필요한 js 와 css등은 별도로 놔두고 jsp을 작성해야한다.

우선 알아둬야할게 uploadify의 경우 서버에 파일을 올릴때 올리고나면 파일명이 중복될것에 대해서 미리 체크해볼수 있게
옵션을 설정을 해주는데 필자의 경우 애초에 오리지널파일명과 변경될 파일명을 같이 등록하는 식으로 처리했다.
(파일을 저장할때 변경될 파일명을 지정해주고 그 파일명으로 rename후 업로드 된다.)

1. uploadify의 관련 js와 css, swf파일들을 작업 경로에 복사하자.
uploadify의 경우 swfobject와 jQuery 라이브러리를 참조하므로 없다면  아래에서 다운받도록하자
   [swfobject], [jQuery]

2. 파일폼 페이지 작성
<!DOCTYPE HTML>
<html>
<head> 
<link href="uploadify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery.1.6.1.min.js"></script>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript" src="jquery.uploadify.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('#file_upload').uploadify({
			'swf'		  	: 'uploadify.swf',	//파일업로드 이벤트를 가로챌 플래쉬.
			'uploader'    	: 'fileUpload.jsp',	//비동기 파일 업로드 처리 페이지 url.
			'cancelImage' 	: 'uploadify-cancel.png',	// 파일업로드시 취소 버튼 이미지.
			'checkExisting' : '',			//기존 파일이 존재하는지 체크할 페이지 url. 
			'postData' 		: {'fileName' : 'attach_'+new Date().getTime() },		//uploader 페이지 호출시 파라미터 추가. 
			'folder'    	: '/upload',
			'buttonText' 	: "파 일 첨 부",
			'auto'      	: true,							//자동 파일 업로드 여부
			'onUploadComplete'  : function(file, queue) {	//업로드 완료후 처리 callback 함수
				for(var name in file) {
					//업로드후 파일정보
					alert(name + "=" + file[name]);
				}
			}
		  });
	});
</script>
<body>
	<input id="file_upload" name="file_upload" type="file" /><br>
</body> 
</html>
uploadify 설정시 추가 옵션에 대한 내용은 해당 [API]문서에서 확인해볼수 있다.
위의 내용을 추가적으로 설명을 하자면 실제 uploader옵션에 "fileUpload.jsp"가 실제 파일 업로드 처리 페이지이다
해당 페이지에서는 어떤 리턴값도 필요가 없으니 순수하게 파일업로드 기능만을 구현하면되겟다.
중복 파일명 문제를 피하기 위해 파일 업로드시 미리 중복 파일명 검색을 하고자 한다면 "checkExisting" 옵션에 해당 체크할수 있는 페이지 url을 추가하면된다.(물론 파일명 중복체크 로직이 필요하며 return 값은 true || false 이다)

필자의 경우 postData 옵션을 통해 저장될 파일명을 미리 지정해주어 DB 저장시 용이하게 하였다.
위와 같은 옵션의 경우 실제 파일업로드 호출 url은 "fileUpload.jsp?fileName=attach_2012232312" 식이 될것이다.

"onUploadComplete" 옵션의 경우 파일 업로드 완료후 실행되는 callback함수로 서버에 올라간 파일정보를 얻을수 있다.
주로 파일명, 파일사이즈, 확장자, 작성일등의 정보를 얻을수 있으니 최종 DB저장시 참고해서 저장하면되겟다.

사족이지만 uploadify의 경우 swf파일을 통해 이벤트를 처리하므로 당연하게도 flash 플로그인을 설치한 사용자만 사용이 가능하다
이는 사용자 UI를 불편하게 만들수도 있기에 위 방법이 절대 베스트는 아니다.(플래쉬 플러그인 미설치 유저가 의외로 많다.)
차후 시간이 된다면 꼭 한번 직접 구현해보고 싶은 기능이니 언제고(?) 만들어봐야겠다.ㅡㅡ;;;;..