拖放文件没有响应

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

您需要有拖放处理程序。此代码取自 doc 。我添加了一个包装 div 来处理拖放操作。处理此问题的两个事件是 ondrop 来处理文件放置，ondragover 只是为了防止文件拖动的默认行为

<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>