拖放文件没有响应

Question

我正在尝试上传文件并拖动&删除文件，但只有上传文件成功；drop不起作用，我想不通。以下是我的代码：

HTML

<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<label for="file-input">
<i onclick="" class="material-icons md-36">upload_file</i>
</label>
<input
onclick="uploadFiles()"
id="file-input"
type="file"
multiple="true"
accept=".docx,.pdf,.jpg,.jpeg,.png"
/>

CSS

.material-icons.md-36 {
font-size: 36px;
color: #65daff;
position: absolute;
top: 47.6%;
right: 16.67%;
left: 11.67%;
cursor: pointer;
user-select: none;
}
#file-input {
display: none;
visibility: none;
}

JavaScript

function uploadFiles() {
var files = document.getElementById("file-input").files;
if (files.length == 0) {
alert("Please first choose or drop any file");
return;
}
var filenames = "";
for (var i = 0; i < files.length; i++) {
filenames += files[i].name + "n";
}
alert("Selected file: " + filenames);
}

Answer 1

您需要有拖放处理程序。此代码取自文档。我在处理程序拖放中添加了一个包装器div。处理这一问题的两个事件是ondrop处理文件删除和undragover防止文件拖动的默认行为

<div id="drop_zone" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);">

function uploadFiles() {
var files = document.getElementById("file-input").files;
if (files.length == 0) {
alert("Please first choose or drop any file");
return;
}
var filenames = "";
for (var i = 0; i < files.length; i++) {
filenames += files[i].name + "n";
}
alert("Selected file: " + filenames);
}
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');
// Prevent default behavior (Prevent file from being opened)
ev.preventDefault();
if (ev.dataTransfer.items) {
// Use DataTransferItemList interface to access the file(s)
for (var i = 0; i < ev.dataTransfer.items.length; i++) {
// If dropped items aren't files, reject them
if (ev.dataTransfer.items[i].kind === 'file') {
var file = ev.dataTransfer.items[i].getAsFile();
alert("Selected file: " + file.name);
}
}
} else {
// Use DataTransfer interface to access the file(s)
for (var i = 0; i < ev.dataTransfer.files.length; i++) {
console.log('... file[' + i + '].name = ' + ev.dataTransfer.files[i].name);
}
}
}

.material-icons.md-36 {
font-size: 36px;
color: #65daff;
top: 47.6%;
right: 16.67%;
left: 11.67%;
cursor: pointer;
user-select: none;
}
#file-input {
display: none;
visibility: none;
}
#drop_zone {
position: relative;
background: #2D2D2D;
padding: 10px;
height: 50vw;
width: 50vw;
display: flex;
justify-content: center;
align-items: center;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<div id="drop_zone" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);">
<label for="file-input">
<i onclick="" class="material-icons md-36">upload_file</i>
</label>
<input onclick="uploadFiles()" id="file-input" type="file" multiple="true" accept=".docx,.pdf,.jpg,.jpeg,.png" />
</div>