jQuery File Upload Plugin (blueimp) 적용삽질기

file upload 부분을 만들어야 하는 일이 있어서 대충 file 태그 추가 했다가

파일 업로드 플러그인 써보는게 어떻냐는 말에 찾아보고 너무 맘에 들어 바로 적용... 시도한게 이번 삽질을 시작하게 된 이유이다.

github에 친절하게 가이드가 되어있다고 생각했으나 .............ㅎㅏ...한숨만..

일단 제일 맘에 들었던 basic plus ui 를 테스트 해보았다

분명 필요한 코드를 다 넣었다고 생각했는데 제대로 작동하지 않는 것이었다 ;ㅁ;

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
	<script src="js/vendor/jquery.ui.widget.js"></script>
	<!-- The Templates plugin is included to render the upload/download listings -->
	<script src="//blueimp.github.io/JavaScript-Templates/js/tmpl.min.js"></script>
	<!-- The Load Image plugin is included for the preview images and image resizing functionality -->
	<script src="//blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js"></script>
	<!-- The Canvas to Blob plugin is included for image resizing functionality -->
	<script src="//blueimp.github.io/JavaScript-Canvas-to-Blob/js/canvas-to-blob.min.js"></script>
	<!-- Bootstrap JS is not required, but included for the responsive demo navigation -->
	<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
	<!-- blueimp Gallery script -->
	<script src="//blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script>
	<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
	<script src="js/jquery.iframe-transport.js"></script>
	<!-- The basic File Upload plugin -->
	<script src="js/jquery.fileupload.js"></script>
	<!-- The File Upload processing plugin -->
	<script src="js/jquery.fileupload-process.js"></script>
	<!-- The File Upload image preview & resize plugin -->
	<script src="js/jquery.fileupload-image.js"></script>
	<!-- The File Upload audio preview plugin -->
	<script src="js/jquery.fileupload-audio.js"></script>
	<!-- The File Upload video preview plugin -->
	<script src="js/jquery.fileupload-video.js"></script>
	<!-- The File Upload validation plugin -->
	<script src="js/jquery.fileupload-validate.js"></script>
	<!-- The File Upload user interface plugin -->
	<script src="js/jquery.fileupload-ui.js"></script>
	<!-- The main application script -->
	<script src="js/main.js"></script>

일단 스크립트 부분.

// <- 이렇게 되어있는 경로는 앞의 http를 생략한 것이라서 그대로 가져다 써도 무방하다.

basic plus ui는 본인이 개발한 플러그인들의 집약체라고 볼 수 있었다.-_-;

jquery.min, jquery.ui.widget 설명은 패스

tmpl 파일은 자바스크립트에서 템플릿을 사용하기 위해 만든 플러그인인데 basic plus ui에서 업로드한 파일들의 목록을 보여주기 위해 사용된다

load-image 파일은 미리보기 썸네일을 만드는데 사용되고

canvas-to-blob 파일은 이미지 리사이징에 사용되는데 canvas는 Html5가 필요해서 일부 브라우저에서는 사용할 수가 없다.

blueimp-gallery 파일은 파일명을 클릭했을 때 원본 사이즈로 미리보기 기능을 지원한다.

process파일은 progress바를 사용하기 위한 것이고

main에는 소스보기에 없는(!!) 스크립트가 숨어있다-_ㅠ

tmpl.js가 있다면 반드시 있어야 하는게 이 템플릿들이다. 

템플릿 Id는 변경할 수도 있고 따로 만들 수도 있다.

내부에 있는 html 코드는 모두 추가해서 보여주는 것까지 완료후에 

좀더 컴팩트하게 만들어 볼까 해서 basic plus 코드도 테스트 해보게 되었다.

 

있는 js랑 코드를 그대로 쓰니 또 안됨...딥빡 ㅠㅠ

다시금 소스보기 해서 일일히 뺄부분은 빼고 더할 부분은 더해갔다

일단 tmpl.js, jquery.fileupload-ui.js, main.js 를 주석처리 하고 template 스크립트 부분도 제외했다

file 태그에 .fileupload()를 걸어놨는데 아이콘이 안변해서 한참 고민하다가

알고보니 그저 css를 안입혔던 것일뿐 ㅠ.ㅠ... 

미리보기가 안나오길래 뭐지 싶었는데 

알고보니 progress bar 태그가 추가가 안되어 있어서..ㅠ.ㅠ

basic plus ui 처럼 파일 delete 기능 넣으려고 보니 plus ui에 국한된 기능이라서 

따로 server side 에서 삭제 하는 함수 추가하여 ajax로 호출하는 것으로 해당 기능 구현을 마쳤다.

나의 미스도 많긴 하지만 -_-+ 필요한 부분별 가이드는 부족한 편이라 한참 들여다 봐야해서 기운 빠졌던 플러그인...

미리보기 기능은 img 태그를 이용해서 IE에서도 구현이 가능할 것같다. 

css파일만 따로 떼어다가 file 태그에 입혀서 사용만해도 괜찮을 것 같다는 생각도 들었다.

어쨌든 너무 좋은 플러그인을 만들어주셔서 개발자분께 감사감사 ;ㅁ;