将文件拖放到 dropzone (HTML5) - 以填充隐藏文件输入字段答案

【问题标题】：Drag and drop file into dropzone (HTML5)--to populate a hidden file input field将文件拖放到 dropzone (HTML5) - 以填充隐藏文件输入字段
【发布时间】：2011-11-16 12:32:18
【问题描述】：

我发现了大量的 jQuery 插件允许用户将文件拖放到“dropzone”并将文件添加到上传队列或立即上传。

但是，我希望允许我的用户将图像拖到放置区并让它填充 <input type="file">。

这已经存在了吗？如果没有，我将如何创建它？

非常感谢，

安迪

【问题讨论】：

为什么要填充输入 type=file ？
计划是让在商店中的产品中添加图像更容易（只需将文件拖放到大盒子上——工作完成）。但是，我不能只在用户添加新产品时上传它，因为我不知道将其保存在哪个 ID 下（数据库将在 INSERT 时自动递增）。因此，我想填充文件输入，这样，当用户单击提交时，它就会正常显示。
它适用于 CMS，适用于我自己的公司（因此，我可以确保他们只使用兼容的浏览器（FF4+ 或 Chrome）。做了更多研究后，我发现浏览器安全正在进入我的方式。我已经设法让它适用于文本输入，但收到文件输入的安全警告:(。如果有人有解决方案，请告诉我，如果没有，我将回到使用正常、无聊的文件输入。
我发现了另一个堆栈帖子，但仅在 chrome 和 safari 中兼容：stackoverflow.com/questions/2657653/…
从那个链接 FormData() 看起来很有趣。这里有没有人有这方面的经验——特别是关于文件上传？

标签： jquery forms html drag-and-drop

【解决方案1】：

HTML5 drag and drop file field

这是最终的工作，我将原版上传字段设置为 opacity : 0 并在鼠标悬停在可见的 dropZone div 上方时通过“dragover”事件将其定位在鼠标下方。

'dragover' 克服了浏览器窗口失焦的问题，并提供了 .pageX 和 .pageY，然后我将它们绑定到不可见文件字段的 .top 和 .left。

【讨论】：

这是一个很好的建议，但我最终使用了一个 jQuery 插件。当我能找到时，我会发布哪一个。
我选择了 Aquaron Dropup (aquaron.com/jquery/dropup)，但它有很多问题，我现在可能会改变它。