jquery
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
});
}
0 댓글