只是简单的拖放，不起作用!!!!!!
我使用了另一个堆栈溢出帖子中的拖放代码。
我试图让文件在被删除时进入文件输入。
其他代码主要是风格/或用于显示文件名。
<!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>
最佳答案
问题在于，当您在放置事件中分配文件时，文件输入上的事件监听器不会触发。 fileInput.addEventListener("更改", () => {
将该代码嵌入到函数中，您可以在 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>关于javascript - 如何进行拖放操作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60728225/