문서 보기역링크PDF로 내보내기맨 위로 이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요. # jQuery File Upload Plugins {{tag>jQuery File Upload Plugins}} 다음의 요구사항을 만족하는 업로드 기능을 구현하려 한다. Drag & Drop 을 지원한다. 사용할 공간이 적다. 업로드 큐의 파일을 제거할 수 있다. - http://www.bestdevlist.com/jquery-file-upload-plugins/ # 1. Droplyjs ![](http://www.bestdevlist.com/wp-content/uploads/2016/06/droplyjs.jpeg) [Demo & Download](https://codecanyon.net/item/droplyjs-php-minimalist-responsive-file-uploader/15249902?ref=gavin_matters) ![](https://goo.gl/qiquk1) 유료 # 2. Simple Ajax Uploader ![](http://www.bestdevlist.com/wp-content/uploads/2016/06/Simple-Ajax-Uploader-.jpeg) [Demo & Download](https://github.com/LPology/Simple-Ajax-Uploader) [Live Demo](https://www.lpology.com/code/ajaxuploader/) Drag&Drop이 지원되지 않는다. ![](https://goo.gl/g3EX7I) 3개의 이미지 파일을 선택했지만, 1개만 확인할 수 있다. # 3. Bootstrap File Input ![](http://www.bestdevlist.com/wp-content/uploads/2016/06/bootstrap-file-input.jpeg) [Demo & Download](https://github.com/kartik-v/bootstrap-fileinput/) # 4. Uploadify ![](http://www.bestdevlist.com/wp-content/uploads/2016/06/uploadify.jpeg) [Deom & Download](http://www.uploadify.com/) [UploadiFive Demo](https://vimeo.com/40923687) ![](https://goo.gl/ZlGvCG) Uploadify 는 무료, UploadFive 는 유료 입니다. uploadify 를 다운로드 받고, `jquery.uploadify.min.js`, `uploadify.css` 파일을 사용합니다. ```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 ![](http://www.bestdevlist.com/wp-content/uploads/2016/06/jsajaxuploader.jpeg) [Demo & Download](https://github.com/JSEver/JSAjaxFileUploader) [Demo](http://jseverdemo.0fees.net/JSAjaxFileUploader/Demo.html?i=1) 페이지에서 선택한 파일 목록을 확인할 수 없다. # 6. jQuery.filer ![](http://www.bestdevlist.com/wp-content/uploads/2016/06/jqueryfiler.jpeg) [Demo & Download](https://github.com/CreativeDream/jquery.filer) Drag&Drop이 지원되지 않는다. # 7. jQuery File Upload ![](http://www.bestdevlist.com/wp-content/uploads/2016/06/jquery-file-upload.jpeg) [Demo & Download](http://blueimp.github.io/jQuery-File-Upload/) # 8. jQuery Ajax File Uploader with Drag&Drop ![](http://www.bestdevlist.com/wp-content/uploads/2016/06/jquery-ajax-file-uploader-with-drag-and-drop.jpeg) [Demo & Download](https://github.com/danielm/uploader) [Simple Demo](http://danielm.herokuapp.com/demos/dnd/simple.php) [dmuploader.min.js](https://goo.gl/oWqMOL) 파일을 사용합니다. ```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> ``` ![](https://goo.gl/92ngwR) 업로드 큐에 등록한 파일을 제거하는 기능이 보이지 않는다. # 9. FileAPI ![](http://www.bestdevlist.com/wp-content/uploads/2016/06/fileapi.jpeg) [Demo & Download](http://mailru.github.io/FileAPI/) ```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; // ... } } }); }); ``` [jquery.fileapi](http://rubaxa.github.io/jquery.fileapi/) [jquery.fileapi.min.js](https://goo.gl/Ca5LF4) 포함 # 10. jQuery Upload File ![](http://www.bestdevlist.com/wp-content/uploads/2016/06/jquery-upload-file.jpeg) [Demo & Download](https://github.com/hayageek/jquery-upload-file) [Documentation](http://hayageek.com/docs/jquery-upload-file.php#doc) # 11. Dropzone.js ![](http://www.bestdevlist.com/wp-content/uploads/2016/06/dropzonejs.jpeg) [Demo & Download](http://www.dropzonejs.com/) [dropzone.js](https://raw.githubusercontent.com/enyo/dropzone/master/dist/dropzone.js) 파일 추가. ```html <div id="eventRegistPicture">dropzone</div> ``` ```javascript $("#eventRegistPicture").dropzone({ url: "/file/fileUploadProc.do" }); ``` jbox 안에 dropzone을 넣었지만, 화면상에 표출되지 않는다. # 12. DropArea ![](http://www.bestdevlist.com/wp-content/uploads/2016/06/droparea.jpeg) [Demo & Download](http://awin.com.br/droparea/sample/index.html) # 13. jQuery Multiple File Upload ![](http://www.bestdevlist.com/wp-content/uploads/2016/06/jquery-multiple-file-upload.jpeg) [Demo & Download](https://github.com/fyneworks/multifile) # 14. HTML5 File Upload ![](http://www.bestdevlist.com/wp-content/uploads/2016/06/html5-file-upload.jpeg) [Demo & Download](https://codecanyon.net/item/html5-file-upload/9254506?ref=gavin_matters) # 15. Drop Uploader ![](http://www.bestdevlist.com/wp-content/uploads/2016/06/drop-uploader.jpeg) [Demo & Download](https://codecanyon.net/item/drop-uploader-dragdrop-javascript-file-uploader/16548700?ref=gavin_matters) open/jquery-file-upload-plugins.txt 마지막으로 수정됨: 2020/06/02 09:25저자 127.0.0.1