1. 사용법
정확하게 이해가 안가서 사용법만 먼저 기록함
<body>
<div class="drop">드롭 해봐</div>
<div class="preview"></div>
<script>
const $drop = document.querySelector(".drop");
// 이 부분 없으면 dragover이벤트가 ondrop를 덮어씌워서 ondrop가 무시되는 것 같음
$drop.ondragover = function(e) {
e.preventDefault();
};
// 사용자가 특정 파일을 드랍했을 경우 실행
// e.dataTransfer.files에 FileList가 들어가 있음
$drop.ondrop = function(e) {
e.preventDefault();
const fileReader = new FileReader();
fileReader.onload = e => document.querySelector(".preview").style = `background-image: url("${e.target.result}")`;
fileReader.readAsDataURL(e.dataTransfer.files[0]);
};
</script>
</body>참고한 사이트
...