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

Question

我正在尝试在 HTML5 中制作一个拖放上传器，并附加要求能够处理从我不拥有且无法编辑的其他网站拖动的文件（主要是图像）。

在这种情况下，在 ondrop 事件中，我没有使用 e.dataTransfer.files 从本地计算机下载图像并将其发布，而是使用 e.dataTransfer.getData('URL') 检索 URL 并将其发布到服务器以供下载服务器-边。

工作正常，除非我拖动包含在链接中的图像。

它在从 <img> 元素启动拖动时有效，但不适用于包含在 <a> 元素中的 <img>。在后一个中，e.dataTransfer.getData('URL') 给了我链接的href，而不是图片的src。

我查看了e.dataTransfer.getData()，看看它是否接受了其他可能有帮助的论点。另一种选择是“文本”，它产生的结果与“URL”相同。

有没有办法获取图像 URL 或者我注定要失败，因为在拖动包含在链接中的图像时浏览器实际上并没有携带图像 URL（即：我正在拖动链接，而不是图像）？

更新

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

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

在第二种情况下，有没有办法获取图像地址而不是ondrop监听器中的链接，还是不可能？ （记住图片可以在任何网站上，我无法捕捉到任何dragstart 事件，基本上只有drop 一个）。

Answer 1

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

DataTransfer.types 只读属性是拖动的数组 在dragstart 事件中设置的数据格式（作为字符串）。这 格式的顺序与包含在 拖拽操作。

数组包含三个types:

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

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

通过将"text/html" 传递给.getData() 来获取字符串，然后使用RegExp 提取html 字符串中的src，或者创建一个元素并将html 字符串附加到该元素，然后获取@ 987654340@ 的<img> 元素使用.src。

holder.ondrop = function (e) {
  e.preventDefault();       
  this.className = '';
  var img = e.dataTransfer.getData("text/html");
  var div = document.createElement("div");
  div.innerHTML = img;
  var src = div.firstChild.src;
  console.log(div.firstChild, src);
  results.innerText = src;
}

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