如何为要拖入的图像创建拖放区域？

javascript或html可以为用户拖入的图像创建拖放区域吗？我想这是一个图像占位符，它将接受在页面生效时拖入它的图像？从如何为要拖入的图像创建拖放区域？

来源

2010-10-29 Zain

图片在哪里？如果你想能够从网页本身拖动图像，这是可能的，但如果你想从外部的图像被删除，那就是~~根本不可能使用JavaScript。~~此刻很难。

编辑：作为@约翰博克提到的，这是可能的，但在目前，这些API是高度不规范和浏览器之间的差异很大。 HTML 5将支持标准和更简单的API，但HTML 5本身并不是标准。

一些资源：

HTML5 Drag and Drop File API - 目前仅在Firefox中，将有望成为标准很快
VBDataObject Interface - 在IE

来源

2010-10-29 04:35:00 casablanca

有可能从桌面到网站拖动文件，虽然它不是那么容易。一个例子就是gmail附件。将文件拖到您正在撰写的电子邮件中，并将其添加/上传。 – 2010-10-29 04:39:28

任何代码片段将帮助完整.... – Zain 2010-10-29 06:38:30

@ user441207：我添加了一些链接。 – casablanca 2010-10-29 14:19:34

简答只适用：当然可以，但你的浏览器需要支持作为HTML5一部分的拖放和文件API。目前，这只是Chrome 8+和Firefox 3.6+。

2011年7月更新：支持此功能的当前浏览器是Chrome，Firefox，Safari 6（如果使用FormData对象，则为Safari 5）和IE 10 Preview 2。

IE 8和9不工作，不知道IE9最终会改变这种情况。

Safari 5（尽管Apple推出HTML5）不支持必需的File API，并且本机资源的DnD无法识别（页面中的DnD可以正常工作，但这只是问题的一半）。您可以通过使用样式化“FILE”类型的INPUT字段来实现不显示文件路径栏并利用拖放到Safari中的文件上传框实际插入完整的文件名 - 你使用一些JavaScript来触发上传，只要他们放弃和中提琴。这是专门为那个黑客设计的a tutorial。

歌剧似乎不支持任何API - 我读过，他们在等待了HTML5规范的战斗，直到尘埃落定再加入必要的这样做这些API的支持。

我其实上面链接的HTML5 Drag and Drop/File API Upload tutorial的作者和使用的方法在imgscalr.com正是你想要的实现 - 如果你想要把它拉下来，看看我是如何做的JavaScript是大量注释。

希望有所帮助。

来源

2011-02-08 17:05:42

最近http://www.dropzonejs.com/已经变得相当普遍。

来源

2013-01-17 17:45:11

只适用于最后一个浏览器版本，但是一个非常好的JS小部件。 – 2013-01-28 09:59:39

@EsteveCamps支持拖放上传所需的API仅受现代浏览器支持。所以这不是DropzoneJS限制 - 它甚至为旧版浏览器提供了一个回退。 – enyo 2013-04-17 22:07:19

如何为要拖入的图像创建拖放区域？

回答

相关问题