dropzone.js (드롭존) 드래그앤드롭 파일 업로드

진행하던 업무에 파일업로드 관련해서 UI 가 조금 변경을 하게 되었습니다.

검색을 해보니 많은 분 들이 dropzone 에 대해 많은 게시 글과 칭찬을 보게 되어 dropzone 훑어 보았습니다.

https://www.dropzonejs.com/

Dropzone.js

 

 

보시다시피 usage 를 살펴보면 사용하기가 너무 간편하고 커스터마이징 하여 장착하기에 매우 훌륭합니다.

​

샘플페이지

<script src="https://rawgit.com/enyo/dropzone/master/dist/dropzone.js"></script>    
<link rel="stylesheet" href="https://rawgit.com/enyo/dropzone/master/dist/dropzone.css">

 <form name="fname">
     <div class="dropzone" id="fileDropzone"></div> <button id="btn-upload-file">서버전송</button>
 </form>

    <script>        
        //fileDropzone dropzone 설정할 태그의 id로 지정
        Dropzone.options.fileDropzone = {
            url: 'Fileupload', //업로드할 url (ex)컨트롤러)
            init: function () {
                /* 최초 dropzone 설정시 init을 통해 호출 */
                var submitButton = document.querySelector("#btn-upload-file");
                var myDropzone = this; //closure
                submitButton.addEventListener("click", function () {
                    console.log("업로드"); //tell Dropzone to process all queued files
                    myDropzone.processQueue();
                });
            },
            autoProcessQueue: false, // 자동업로드 여부 (true일 경우, 바로 업로드 되어지며, false일 경우, 서버에는 올라가지 않은 상태임 processQueue() 호출시 올라간다.)
            clickable: true, // 클릭가능여부
            thumbnailHeight: 90, // Upload icon size
            thumbnailWidth: 90, // Upload icon size
            maxFiles: 1, // 업로드 파일수
            maxFilesize: 10, // 최대업로드용량 : 10MB
            parallelUploads: 1, // 동시파일업로드 수(이걸 지정한 수 만큼 여러파일을 한번에 컨트롤러에 넘긴다.)
            addRemoveLinks: true, // 삭제버튼 표시 여부
            dictRemoveFile: '삭제', // 삭제버튼 표시 텍스트
            uploadMultiple: false, // 다중업로드 기능
        };
    </script>

​

 

반응형

​