드래그-드랍 이벤트를 이용하여 IBUpload 컨트롤로 파일들을 추가합니다
브라우저의 지원 여부에 따라 파일을 동시에 1 개 또는 여러 개를 동시에 선택하여 업로드 할 수 있습니다.
$(Selector).IBUpload("addDropFile", event); // Method
특정 DIV 태그에 drop 이벤트를 걸어두어 사용자가 해당 영역에 드래그-드랍을 통한 파일들을 추가하게 되면, addDropFile
의 메소드에 event 를 인자로 전달해 주어, 사용자가 드랍한 파일들을 모두 IBUpload 컨트롤로 추가하게 됩니다.
useDragDrop 속성을 true
로 사용하면 이미 자체 컨트롤에서 이러한 기능이 동작하게 되므로 파일이 중복 추가 현상이 나타날 수 있습니다. 따라서 useDragDrop 속성은 반드시 false 로 설정해야 정상 동작
합니다.
아래의 예제와 같이 특정 DIV 태그와 관련해서 최소한 3개의 이벤트(dragenter, dragover, drop )는 반드시 걸어두어야 합니다.
$("#userDropDiv").on('dragenter', function(e) {
e.stopPropagation();// 필수
e.preventDefault();// 필수
$("#userDropDiv").css('border', '5px dotted #ff6666'); // 옵션. 드래그시 테두리 점선
});
$("#userDropDiv").on('dragover', function(e) {
e.stopPropagation();
e.preventDefault();
});
$("#userDropDiv").on('drop', function(e) {
e.preventDefault();
$("#myUpload").IBUpload("addDropFile", e); // 핵심 한 줄!!
$("#userDropDiv").css('border', '1px solid black'); // 디자인 옵션 (동작에 필수 아님 - 드랍시 테두리를 원래대로 표시한다 )
});
version | desc |
---|---|
7.3.0.20 |