将拖放文件拖放到标准html文件输入中

Z时代
2024-01-10
分类：问答

如今，我们可以将文件拖放到一个特殊的容器中，并使用XHR2上载它们。带有实时进度条等。非常酷的东西。

但是有时候我们不想要那么酷。我想要的是一次将文件拖放：<input type=file multiple>。

那可能吗？有什么方法可以从文件拖放中用正确的文件名（？）“填充”文件输入吗？（出于文件系统安全性原因，完整的文件路径不可用。）

因为我想提交一份普通表格。适用于所有浏览器和所有设备。拖放只是渐进式增强，可以增强和简化UX。具有标准文件输入（+

multiple属性）的标准表单将在那里。我想添加HTML5增强功能。

我知道在浏览器中，您可以（几乎总是）将文件拖放到文件输入本身中。我知道Chrome通常会执行此操作，但有时会失败，然后将文件加载到当前页面中（如果您要填写表单，则会导致很大的失败）。我想傻瓜和浏览器证明。

回答：

以下内容适用于Chrome和FF，但我还没有找到涵盖IE10 +的解决方案：

// 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();
};
<!DOCTYPE html>
<html>
<body>
<div id="dropContainer" style="border:1px solid black;height:100px;">
   Drop Here
</div>
  Should update here:
  <input type="file" id="fileInput" />
</body>
</html>