# 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)