jQuery - 드래그 앤드 드롭 업로더 구현

 모든 로직은 DOM이 준비된 다음 실행될 수 있도록 jQuery.ready() 내에 구현하도록 합니다. jquery가 중심이 되어 드래그 앤드 드롭 API를 추상화하는 jquery.drop.js, 그리고 Ajax 업로드를 담당하는 jquery.upload.js 등의 라이브러리를 이용합니다.

//= require <jquery>
//= recuire <jquery.ui>
//= require <jquery.drop>
//= require <jquery.upload>

jQuery.ready(function($){
  /* ... */
});

드롭 영역 만들기

사용자가 #drop 엘리먼트에 파일을 드래그 앤드 드롭할 수 있도록 #drop 엘리먼트를 드롭 영역으로 만듭니다.

drop 이벤트에 바인드해서 드롭 이벤트를 취소하거나 드롭한 파일을 uploadFile() 함수로 전달할 수 있습니다.

var view = $("#drop");
view.dropArea();

view.bind("drop", function(e){
  e.stopPropagation();
  e.preventDefault();

  var files = e.originalEvent.dataTransfer.files;
  for ( var i = 0; i < files.length; i++){
    uploadFile(files[i]);
  }
  return false; 
});

파일 업로드

이제 실제 파일을 전송할 수 있는 uploadFile() 함수를 살펴보겠습니다.

jquery.upload.js의 $.upload() 함수를 이용해 서버로 Ajax 업로드 요청을 보내려고 합니다. progress 이벤트를 리스닝해서 jQuery UI 프로그레스바를 갱신합니다. 그럼, 업로드가 완료되면 사용자에게 이를 알리고 엘리먼트를 제거합니다.

var uploadFile = function(file){
  var element = $("<div/>");
  element.text(file.fileName);

  var bar = $("<div/>"); 
  element.append(bar);
  $("#progress").append(element);

  var onProgress = function(e){
    var per = Math.round((e.position / e.total) * 100);
    bar.progressbar({value: per});
  };

  var onSuccess = function(){
    element.text("Complete");
    element.delay(1000).fade();
  };

  $.upload("/upload", file, {
    upload: {progress: onProgress},
    success: onSuccess
  });
}