将拖放文件拖放到标准html文件输入中
如今，我们可以将文件拖放到一个特殊的容器中，并使用XHR2上载它们。带有实时进度条等。非常酷的东西。
但是有时候我们不想要那么酷。我想要的是一次将文件拖放 到标准HTML文件输入中 ：<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>
您可能想要使用addEventListener或jQuery（等）注册您的evt处理程序-这只是为了简便起见。
-
问题内容： 我一直在编码OCR书籍扫描程序（它通过读取页码来重命名页面），并且已经从基本的CLI Python脚本切换到GUI。 我正在使用PyQT4并拖放查看大量文档，但是没有运气。它只是拒绝接收那些文件！我将这些用于我的UI设计文章： http://tech.xster.net/tips/pyqt-drag-images-into-list-widget-for-thumbnail-list/
-
问题内容： 我正在尝试向我的SwiftUI Mac应用程序添加“拖放”手势/功能。 我想将文件从系统/桌面拖放到应用程序中。我发现它可以在常规Swift中使用。我现在正尝试在SwiftUI中执行此操作。 我在SwiftUI for Views中找到了一个函数。但是，看起来这仅适用于应用程序内部的内部手势。我想从外面拖文件。 在Swift中，您需要为拖动的类型注册NSView。 我想创建一个NSVi
-
作为桌面程序，当然希望能够实现操作系统的 drag & drop 功能。 很多网站已经支持拖拽文件 Electron 当然也支持 要在 app 中实现此功能 ，你需要在 Render 进程中调用webContents.startDrag(item) API， 此API会给 Main 进程发送一个ondragstart事件。 在 Render 进程中, 接收 ondragstart 事件并发送消息到
-
概览 作为桌面程序，当然希望能够实现操作系统的 drag & drop 功能。 很多网站已经支持拖拽文件， Electron 当然也支持 要在您的应用中实现此功能，您需要调用 webContent.startDrag(item) API 响应 ondragstart 事件。 示例 一个演示如何动态创建要从窗口中拖出的文件的示例。 Preload.js 在 preload.js 中使用 contex
-
问题内容： 有人可以告诉我我在做什么错吗？我可以使用常规面板进行拖放操作，但现在尝试使用表格，无法对其进行整理。我对Points和DropTargets感到困惑。不要介意“添加”按钮。我觉得我需要首先处理DnD。 问题答案： 我个人会放弃滚动窗格上的放置目标，这将导致您遇到许多问题。 您的放置方法有点怪异… 这是一个坏主意.... 基本上，您尝试从可转移文件中提取文件列表，并且不管操作成功与否，您
-
问题内容： 我还没有看到执行此操作的示例。API规范中不允许这样做吗？ 我正在寻找一种简单的拖放解决方案，用于上传整个文件夹的照片树。 问题答案： 多亏了Chrome> = 21，现在才有可能。