jquery drag and drop 드래그앤드랍 멀티파일업로드

jquery 를 이용한 드래그앤드랍 파일업로드 방법이다.

 

우선, 파일을 탐색기에서 드래그하여, 드랍할 영역을 아래와 같이 만든다.

 

<style>     #dropzone     {         border:2px dotted #3292A2;         width:90%;         height:50px;         color:#92AAB0;         text-align:center;         font-size:24px;         padding-top:12px;         margin-top:10px;     } </style>   <div id="dropzone">Drag & Drop Files Here</div>

 

웹브라우저로 보면, 아래와 같이 나타나게 된다.

 

 

이제 div 영역에 아래와 같이, 자바스트립트로 drag & drop 을 허용해준다.

 

$(function () {      var obj = $("#dropzone");      obj.on('dragenter', function (e) {           e.stopPropagation();           e.preventDefault();           $(this).css('border', '2px solid #5272A0');      });      obj.on('dragleave', function (e) {           e.stopPropagation();           e.preventDefault();           $(this).css('border', '2px dotted #8296C2');      });      obj.on('dragover', function (e) {           e.stopPropagation();           e.preventDefault();      });      obj.on('drop', function (e) {           e.preventDefault();           $(this).css('border', '2px dotted #8296C2');           var files = e.originalEvent.dataTransfer.files;           if(files.length < 1)                return;           F_FileMultiUpload(files, obj);      }); });

 

div 영역의 dotted 테두리에 드래그 하여 마우스를 올리면, 아래와 같이 solid 테두리로 변경된다.

 

 

drop 이벤트를 보면, e.originalEvent.dataTransfer.files 에서 멀티업로드시, drop 했던 파일 목록을 가져와서, 업로드 하는 함수를 호출하고 있다. 이 영역이 파일뿐만 아니라, 다른 것들도 drag and drop 이 허용되기 때문에, 파일이 있는 경우만, 업로드 처리를 하고 있다.

 

이제 실제, 서버로 업로드 하는 자바스크립트는 아래와 같다.

 

// 파일 멀티 업로드 function F_FileMultiUpload(files, obj) {      if(confirm(files.length + "개의 파일을 업로드 하시겠습니까?") ) {          var data = new FormData();          for (var i = 0; i < files.length; i++) {             data.append('file', files[i]);          }          var url = "<서버 파일업로드 URL>";          $.ajax({             url: url,             method: 'post',             data: data,             dataType: 'json',             processData: false,             contentType: false,             success: function(res) {                 F_FileMultiUpload_Callback(res.files);             }          });      } } // 파일 멀티 업로드 Callback function F_FileMultiUpload_Callback(files) {      for(var i=0; i < files.length; i++)          console.log(files[i].file_nm + " - " + files[i].file_size); }

 

 

drop 했던 파일 목록은, FormData 형태의 file 배열로 넘긴다.

이는 INPUT 태그의 file 과 같다.

서버의 <서버 파일업로드 URL> 은 php, asp.net, java 등의 기존 업로드 로직을 그대로 사용하면 된다.

서버쪽은, 다르게 처리할 부분이 전혀없다.

 

예제에서 사용한 서버코드는 asp.net 에서, Request.Files 로 업로드 파일을 저장하고, 저장된 결과의 파일명과 파일사이즈를 json 형태로 리턴하였다.