如今，我们可以将文件拖放到一个特殊的容器中，然后使用 XHR 2 上传它们。一次很多。带有实时进度条等。非常酷的东西。这里的例子。
但有时我们不想要那么酷。我想要的是将文件（一次很多）拖放 到标准 HTML 文件输入 中：<input type=file multiple>.
<input type=file multiple>
那可能吗？有没有办法用正确的文件名（？）从文件拖放中“填充”文件输入？（出于文件系统安全原因，完整文件路径不可用。）
为什么？ 因为我想提交一个普通的表格。适用于所有浏览器和所有设备。拖放只是渐进式增强，以增强和简化 UX。带有标准文件输入（+multiple属性）的标准表单将在那里。我想添加 HTML5 增强功能。
multiple
编辑 我知道在 某些 浏览器中，您 有时 （几乎总是）可以将文件放入文件输入本身。我知道 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>
您可能想要使用addEventListenerjQuery（等）来注册您的 evt 处理程序——这只是为了简洁起见。
addEventListener
