작동하지 않는 간단한 드래그 앤 드롭 !!!!!!
다른 스택 오버플로 게시물의 드래그 앤 드롭 코드를 사용했습니다.
파일을 놓을 때 파일 입력에 들어가도록 노력하고 있습니다.
다른 코드는 대부분 stylistic /이거나 파일 이름을 표시하기위한 것입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<link href="style.css" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>File Upload</title>
</head>
<body>
<div id="dropContainer">
Drag and drop a file
<br>
or
<br>
<input type="file" id="fileInput" hidden="hidden" />
<button id="fakeButton">Select a file</button>
<span id="fileText">No file Selected</span>
</div>
<script>
const dropContainer = document.getElementById("dropContainer");
const fileInput = document.getElementById("fileInput");
const fakeButton = document.getElementById("fakeButton");
const fileText = document.getElementById("fileText");
fakeButton.addEventListener("click", () => {
fileInput.click();
});
// dragover and dragenter events need to have 'preventDefault' called
// in order for the 'drop' event to register.
// See: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations#droptargets
dropContainer.ondragover = dropContainer.ondragenter = function (evt) {
evt.preventDefault();
};
dropContainer.ondrop = function (evt) {
// pretty simple -- but not for IE :(
fileInput.files = evt.dataTransfer.files;
// If you want to use some of the dropped files
const dT = new DataTransfer();
dT.items.add(evt.dataTransfer.files[0]);
dT.items.add(evt.dataTransfer.files[3]);
fileInput.files = dT.files;
evt.preventDefault();
};
fileInput.addEventListener("change", () => {
if (fileInput.value) {
fileText.innerHTML = fileInput.value.match(/[\/\\]([\w\d\s\.\-\(\)]+)$/)[1];
} else {
fileText.innerHTML = "no file selected";
}
});
</script>
</body>
</html>
문제는 drop 이벤트에서 파일을 할당 할 때 파일 입력의 이벤트 리스너가 실행되지 않는다는 것입니다. fileInput.addEventListener("change", () => {
대신 해당 코드를 함수에 임베드하면 ondrop이벤트가 끝날 때 대신 호출 하여 예상되는 동작을 완료 할 수 있습니다.
const dropContainer = document.getElementById("dropContainer");
const fileInput = document.getElementById("fileInput");
const fakeButton = document.getElementById("fakeButton");
const fileText = document.getElementById("fileText");
function SetFileName() {
if (fileInput.value) {
fileText.innerHTML = fileInput.value.match(/[\/\\]([\w\d\s\.\-\(\)]+)$/)[1];
} else {
fileText.innerHTML = "no file selected";
}
};
fakeButton.addEventListener("click", () => {
fileInput.click();
});
// dragover and dragenter events need to have 'preventDefault' called
// in order for the 'drop' event to register.
// See: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations#droptargets
dropContainer.ondragover = dropContainer.ondragenter = function(evt) {
evt.preventDefault();
};
dropContainer.ondrop = function(evt) {
// pretty simple -- but not for IE :(
fileInput.files = evt.dataTransfer.files;
// If you want to use some of the dropped files
const dT = new DataTransfer();
dT.items.add(evt.dataTransfer.files[0]);
fileInput.files = dT.files;
SetFileName()
};<!DOCTYPE html>
<html lang="en">
<head>
<link href="style.css" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>File Upload</title>
</head>
<body>
<div id="dropContainer">
Drag and drop a file
<br>
or
<br>
<input type="file" id="fileInput" hidden="hidden" />
<button id="fakeButton">Select a file</button>
<span id="fileText">No file Selected</span>
</div>
</body>
</html>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다