Question

我正在尝试将文件拖到div框中并做2件事：

更改div框的颜色。
用拖动的文件填充表单中的<input type="file">元素。

这是我到目前为止在代码中所拥有的。我曾尝试将文件拖到div框中，但是当我这样做时，它将继续重定向页面以显示所删除文件的内容。请帮忙，谢谢！

function processFile(file) {
  file.preventDefault();
  document.body.style.backgroundColor = "lightgreen";
  document.getElementById('fileInput').value = file;
  document.getElementById('fileForm').submit();
}

#box {
  background-color: lightblue;
  height: 100px;
  width: 100px;
}

<html>

<head>
  <title>Drag and Drop</title>
</head>

<body>
  <h1>Drag and Drop</h1>
  <div id="box" ondrop="processFile(file)">Drop here</div>
  <br>
  <form method="post" id="fileForm" action="/submitFile">
    <input type="file" name="submission" id="fileInput">
    <input type="submit" value="Send">
  </form>
</body>

</html>

Answer 1

看看具有拖放功能的Joe Zim的this Codepen。

您还可以使用以下方法修改JS来更改元素的背景颜色：

document.getElementById('id-of-element-to-change-color').style.backgroundColor = 'gray'

在函数内部。

Answer 2

您需要设置事件ondragover
ondrop的参数是event而不是file。

function processFile(event) {
  event.preventDefault();
  document.body.style.backgroundColor = "lightgreen";
  document.getElementById('fileInput').value = event.dataTransfer.getData('file');
  document.getElementById('fileForm').submit();
}

function allowDrop(event) {
  event.preventDefault();
  // change your color here
}

#box {
  background-color: lightblue;
  height: 100px;
  width: 100px;
}

<html>

<head>
  <title>Drag and Drop</title>
</head>

<body>
  <h1>Drag and Drop</h1>
  <div id="box" ondrop="processFile(event)" ondragover="allowDrop(event)">Drop here</div>
  <br>
  <form method="post" id="fileForm" action="/submitFile">
    <input type="file" name="submission" id="fileInput">
    <input type="submit" value="Send">
  </form>
</body>

</html>

Answer 3

首先，由于安全原因（您想像的网页会在没有采取任何措施的情况下窃取您的PC内容），因此无法通过javascript设置输入文件类型的值，因此请不要使用输入文件，而要使用div。

但是，您可以读取已删除的文件。拖放事件对象的DragEvent接口具有e.dataTransfer属性，您可以将其馈送到FormData，然后馈送到send it via AJAX。

手头有提到的参考文献，您可以遵循此step by step tutorial。您的示例中的CSS部分是可以的。祝你好运。

拖放文件输入

3 个答案: