<!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>Document</title>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<style>
#drop_zone {
border: 5px solid blue;
width: 400px;
height: 300px;
}
</style>
<body>
<h1>How to Drag&Drop File Upload</h1>
<form method="post" enctype="multipart/form-data">
<input type="file" id="file" name="file" multiple >
<div id="drop_zone" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);">
<p id="drop_zone_item_name_list" class="text-center">파일을 이곳에 끌어다 놓아주세요</p>
</div>
<button type="button" onclick="checkForm()" class="btn btn-primary">submit</button>
</form>
<script>
const dropZone = document.querySelector('#drop_zone')
let formData = new FormData() // formData library
// 들어왔을 때 배경 색 변경
dropZone.addEventListener('dragover', () => {
dropZone.style.backgroundColor = 'gray'
})
// 나갔을 때 배경 색 복원
dropZone.addEventListener('dragleave', () => {
dropZone.style.backgroundColor = 'white'
})
function dragOverHandler(ev) {
console.log('File(s) in drop zone');
// Prevent default behavior (Prevent file from being opened)
ev.preventDefault();
}
function dropHandler(ev) {
console.log('File(s) dropped');
ev.preventDefault();
if (ev.dataTransfer.items) {
let drop_zone_item_name_list = document.querySelector('#drop_zone_item_name_list')
drop_zone_item_name_list.innerHTML = ""
for (let i = 0; i < ev.dataTransfer.items.length; i++) {
// If dropped items aren't files, reject them
if (ev.dataTransfer.items[i].kind === 'file') {
const file = ev.dataTransfer.items[i].getAsFile();
// console.log('... file[' + i + '].name = ' + file.name);
drop_zone_item_name_list.innerHTML += file.name + "<br>" // 리스트에 출력
console.log(file)
formData.append('files',file[i]) // formData 에 data 삽입
}else{
console.log('it is not a file')
}
}
console.log('file loop is end')
} else {
console.log('use interface')
// Use DataTransfer interface to access the file(s)
for (let i = 0; i < ev.dataTransfer.files.length; i++) {
console.log('... file[' + i + '].name = ' + ev.dataTransfer.files[i].name);
}
}
dropZone.style.backgroundColor = 'white'
}
function checkForm() {
if(formData) {
$.ajax({
data: checkForm,
method: 'post',
dataType: false,
})
.success( console.log('no error'))
.fail(console.log('fail'))
}
}
</script>
</body>
</html>
반응형
'FrontEnd > JavaScript' 카테고리의 다른 글
| 에러해결 : Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 (0) | 2021.11.01 |
|---|---|
| [ HTML, JAVASCRIPT ] Form - input - file (0) | 2021.11.01 |
| [ JavaScript ] Promise 사용하기 예제 (0) | 2021.10.28 |
| [ Javascript ] [ jQuery ] Ajax - PHP 사용하기 (0) | 2021.10.20 |
| [ JavaScript ] Ajax 기본 틀 (0) | 2021.10.20 |
