jQuery File Upload Plugins
다음의 요구사항을 만족하는 업로드 기능을 구현하려 한다. Drag & Drop 을 지원한다. 사용할 공간이 적다. 업로드 큐의 파일을 제거할 수 있다.
1. Droplyjs
2. Simple Ajax Uploader
3. Bootstrap File Input
4. Uploadify
Uploadify 는 무료, UploadFive 는 유료 입니다.
uploadify 를 다운로드 받고, jquery.uploadify.min.js, uploadify.css 파일을 사용합니다.
- snippet.javascript
<!-- uploadify --> <link rel="stylesheet" type="text/css" href="<c:url value='/js/uploadify/uploadify.css' />" /> <script type="text/javascript" src="<c:url value='/js/uploadify/jquery.uploadify.min.js' />"></script>
5. JSAjax File Uploader
6. jQuery.filer
7. jQuery File Upload
8. jQuery Ajax File Uploader with Drag&Drop
dmuploader.min.js 파일을 사용합니다.
- snippet.html
<!-- dmuploader --> <link rel="stylesheet" type="text/css" href="<c:url value='/js/dmuploader/uploader.css' />" /> <script type="text/javascript" src="<c:url value='/js/dmuploader/dmuploader.min.js' />"></script>
업로드 큐에 등록한 파일을 제거하는 기능이 보이지 않는다.
9. FileAPI
- snippet.javascript
var el = document.getElementById('my-input'); FileAPI.event.on(el, 'change', function (evt/**Event*/){ var files = FileAPI.getFiles(evt); var xhr = FileAPI.upload({ url: 'http://rubaxa.org/FileAPI/server/ctrl.php', files: { file: files[0] }, complete: function (err, xhr){ if( !err ){ var result = xhr.responseText; // ... } } }); });
10. jQuery Upload File
11. Dropzone.js
dropzone.js 파일 추가.
- snippet.html
<div id="eventRegistPicture">dropzone</div>
- snippet.javascript
$("#eventRegistPicture").dropzone({ url: "/file/fileUploadProc.do" });
jbox 안에 dropzone을 넣었지만, 화면상에 표출되지 않는다.
