[JavaScript] file drag and drop

드래그 앤 드롭 API를 사용하면 HTML 임의의 요소에 드래그한 파일 처리가 가능하다.

<div id="divId"></div>

dragenter	박스 안에 Drag 들어왔을 때
dragover	박스 안에 Drag를 하고 있을 때
dragleave	박스 밖으로 Drag가 나갈 때
drop	박스 안에서 Drag를 Drop했을 때

 

$(function(){
        
        // drag and drop test를 위함.
        var uploadBox = document.querySelector('#divID');
        
        // 파일 담아줄 input 객체 필요없음 
        // event.dataTransfer.files 여기에 drop한 파일의 정보가 담김        
        
        /* 박스 안에 Drag 들어왔을 때 */
        uploadBox.addEventListener('dragenter', function(e) {
        });
        
        /* 박스 안에 Drag를 하고 있을 때 */
        uploadBox.addEventListener('dragover', function(e) {
            e.preventDefault();
            console.log('dragover');
        });
        
        /* 박스 밖으로 Drag가 나갈 때 */
        uploadBox.addEventListener('dragleave', function(e) {
            console.log('dragleave');
        });
        
        /* 박스 안에서 Drag를 Drop했을 때 */
        uploadBox.addEventListener('drop', function(e) {
            e.preventDefault();
            console.log('drop');
            
            //파일 이름을 text로 표시
            var files = e.dataTransfer.files;
            for(var i = 0; i < files.length; i++){
            var file = e.dataTransfer.files[i];
            console.log('file '+[i]+' name : ' + file.name);
            console.log('file '+[i]+' size : ' + file.size);
            console.log('file '+[i]+' type : ' + file.type);
            }
            
            // 파일 drag drop 후 함수 
            fnInsert();
        });
});