안녕하세요.
자바스크립트를 이용해서 파일 드래그 앤 드롭을 구현해보겠습니다.
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;
});
결과
'JavaScript' 카테고리의 다른 글
| [ JavaScript ] 테이블 동적 행 추가/삭제하기 (0) | 2022.08.31 |
|---|---|
| [ JavaScript ] 테이블 행 값 가져오기 (0) | 2022.08.31 |
| [JavaScript] 현재 브라우저가 실행되고 있는 운영체제 이름을 가져오기 (0) | 2022.08.18 |
| [Javascript] 작업 시간 측정하기 (0) | 2022.08.05 |
| [javascript] url 형식 체크하기 (0) | 2022.07.25 |
