如何创建拖放区来上传 Gmail 等文件？答案

【问题标题】：How to create a drag and drop area to upload files like Gmail?如何创建拖放区来上传 Gmail 等文件？
【发布时间】：2013-04-03 07:16:42
【问题描述】：

在 Gmail 中，在撰写电子邮件时，如果您将文件拖到撰写区域（编辑器）以附加文件，则撰写区域将变为拖放区域以上传文件。

我想知道如何做以下事情：

如何将 HTML 元素变成拖放文件上传区域，当用户将文件拖到元素上？

无需将元素转为拖放文件上传区域。但是可以有另一个 HTML 元素，它用作拖放文件上传区域，当用户将文件拖到第一个元素上时，它需要出现在第一个元素的顶部。所以，我需要知道如何知道用户何时拖动文件并将其移动到任何 html 元素上。这就像带有拖动文件的mouseover 事件。这是什么活动？

【问题讨论】：

标签： javascript html file-upload drag-and-drop

【解决方案1】：

有一个jQuery插件可以让你拖放要上传的文件...寻找jQuery File Upload Demo

要做你想做的事，你必须添加mouseIn事件处理，在事件中，这样做：

function draggingIn(e) {

   var count =  e.dataTransfer.files.length; (like Chamika Sandamal function)

   if (count > 0) {
        //A file is dragged
        $('droppable').addClass('showBox');
   }
}

对于最近的浏览器，可以使用 HTML5 可拖动能力see here

看起来像这样：fiddle我做了一些测试，只是寻找拖动事件

【讨论】：

这似乎是一个不错的文件上传插件，它的工作方式与我的要求相似。我会尝试这个插件，并会找到更多关于我的问题的信息。谢谢。
是的，我一需要上传文件就使用它...这是一个很棒的插件，易于配置和适应...
目前我正在为一个项目使用 plupload。我正在指定一个元素来拖放要上传的文件，如下图所示：d.pr/i/5Rgm。我正在寻找一个解决方案，以便当用户将文件拖到浏览器时，会出现这个拖放区域。
您只需要触发 mouseIn 和 mouseOut 事件...jQuery mouseOut mouseIn 或者您是否希望在拖动文件时只显示拖放区域？
没有 mouseIn 和 mouseOut 事件。如果用户将鼠标移到它上面，我不会出现。我希望它出现，只有当用户将文件拖到浏览器时（如您在第二句话中所说）。

【解决方案2】：

你有没有自己尝试过，也许是谷歌？ sample at html5demos.com

【讨论】：

这个插件不错，但是有一个元素可以拖拽，已经指定了。当用户将文件拖到不同的元素上时，我希望它出现。但是，我会尝试这个插件和其他一些插件，并让你知道我什么时候能找到我要找的东西。谢谢。

【解决方案3】：

参考这个网站，因为 Gmail 拖放是在这个概念中完成的。

https://developer.mozilla.org/en-US/docs/Web/Events/drag

https://developer.mozilla.org/en-US/docs/Web/Events/drop

有什么问题可以在下方留言

【讨论】：