在窗口之间拖放图像而不是链接 - HTML5

时间:2016-12-29 23:06:53

标签: javascript html5 url file-upload droppable

我正在尝试在HTML5中进行拖放上传,并且要求能够使用我不拥有且无法编辑的其他网站(主要是图像)拖动文件。

在这种情况下,在ondrop事件中,我不是使用e.dataTransfer.files从本地计算机下载图像并将其发布,而是使用e.dataTransfer.getData('URL')检索网址并将其发布到服务器下载服务器端。

除非我拖动链接中包含的图片,否则可以罚款。

在从<img>元素启动拖动时起作用,但在<img>元素中包含<a>时不起作用。在后者中,e.dataTransfer.getData('URL')为我提供了链接的href,而不是图片的src

我调查了e.dataTransfer.getData(),看看它是否接受了其他可以提供帮助的论据。另一种选择是“文本”,它带来与“URL”相同的结果。

有没有办法获取图片网址,或者我注定了因为浏览器在拖动链接中包含的图片时没有实际携带图片网址(即:我拖动链接,而不是图片)?

更新

为了说明我在这里创建了一个jsfiddle:https://jsfiddle.net/2m58rfou/
另有一张有两张图片来展示我的问题:https://jsfiddle.net/870asboa/
在单独的选项卡中打开它们,然后尝试拖放放置区中的两个图像。

通过第一张图片,我得到了我想要的东西:https://www.gstatic.com/webp/gallery/1.sm.jpg
对于第二个,我得到http://www.google.com/,图像所在的链接,而不是图像地址。

在第二种情况下,有没有办法获取图像地址而不是ondrop监听器中的链接,还是不可能? (请记住,图像可以在任何网站上,我无法捕获任何dragstart事件,基本上只有drop事件。

1 个答案:

答案 0 :(得分:2)

dragover事件处理程序中,迭代event.dataTransfer.types

  

DataTransfer.types只读属性是拖动的数组   在dragstart事件中设置的数据格式(作为字符串)。该   格式的顺序与包含在中的数据的顺序相同   拖动操作。

数组包含三个types

  • text/plain
  • text/uri-list
  • text/html

text/html是被拖动的html元素的<img>字符串。

通过将"text/html"传递给.getData()来获取字符串,然后使用src提取html字符串RegExp或创建元素并附加{ {1}}字符串到元素,然后使用html获取src元素的<img>

.src

jsfiddle https://jsfiddle.net/2m58rfou/6/