[JavaScript] 파일 드롭 이벤트(File Drop Event)

 

 

자바스크립트를 이용하여 파일 드롭 기능을 구현한다.

 

이벤트 종류	설명
drop	드래그한 파일이 영역에 드롭되었을 때 발생
dragover	드래그한 파일이 영역에 머물러 있을 때 발생

 

 

 

[HTML 소스]

<div id="dropZone">
    <div id="dropZoneTitle">파일을 올려놓으세요</div>
</div>

 

 

[CSS 소스]

#dropZone {
    margin-top: 5px;
    border: 1px solid rgb(121, 121, 121);
    width: 700px;
    height: 200px;
}
#dropZoneTitle {
    display: flex;
    justify-content: center;
    margin-top: 80px;
}

 

 

[JavaScript 소스]

const dropZone = document.getElementById("dropZone");

// drop 이벤트를 사용하기 위해서는 ondragover 이벤트 사용은 필수적이다.
dropZone.ondragover = (e) => {
    e.preventDefault();
}

dropZone.ondrop = (e) =>{
    e.preventDefault();

    var data = e.dataTransfer.files;
    console.log(data); // 데이터 확인용
    
    var dropZoneResult = "";
    for(let i = 0 ; i < data.length ; i++){
        dropZoneResult += `${i+1}) 파일명 : ${data[i].name}, 사이즈 : ${data[i].size}KB, 타입 : ${data[i].type} 
        `;
    } 

    dropZone.innerText = dropZoneResult;
}

 

드롭된 파일은 drop 이벤트 객체의 dataTransfer 데이터에 담겨 전달되고 dataTransfer의 files로 접근하여 드롭된 파일 정보를 가져올 수 있습니다.

 

 

drop Box

 

drop 결과

 

 

 

console.log를 확인해보면 dataTransfer 내 다양한 정보가 담겨있는걸을 확인 할 수 있다.

 

e.dataTransfer.files 결과