[JavaScript] 파일 드래그 앤 드롭하기

JavaScript

[JavaScript] 파일 드래그 앤 드롭하기

teamnova 2022. 8. 22. 12:00

728x90

안녕하세요.

자바스크립트를 이용해서 파일 드래그 앤 드롭을 구현해보겠습니다.

html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>파일 드래그 앤 드롭</title>

  <link rel="stylesheet" href="drag_drop.css">
  <script defer src="drag_drop.js"></script>
</head>

<body>

<div class="file_box">
  <div class="file_name">이곳에 파일을 끌어놓으세요.</div>
</div>

</body>
</html>

css

.file_box {
  border: 2px solid rgb(13 110 253 / 25%);
  border-radius: 10px;
  margin-top: 20px;
  padding: 40px;
  text-align: center;
}

javascript

const dropbox = document.querySelector('.file_box');
const input_filename = document.querySelector('.file_name');

//박스 안에 drag 하고 있을 때
dropbox.addEventListener('dragover', function (e) {
  e.preventDefault();
  this.style.backgroundColor = 'rgb(13 110 253 / 25%)';
});

//박스 밖으로 drag가 나갈 때
dropbox.addEventListener('dragleave', function (e) {
  this.style.backgroundColor = 'white';
});

//박스 안에 drop 했을 때
dropbox.addEventListener('drop', function (e) {
  e.preventDefault();
  this.style.backgroundColor = 'white';

  //파일 이름을 text로 표시
  let filename = e.dataTransfer.files[0].name;
  input_filename.innerHTML = filename;
});

결과