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

Question

我正在尝试在 HTML5 中制作一个拖放上传器，并增加了一个要求，即能够使用从我不拥有且无法编辑的其他网站拖拽的文件（主要是图片）。

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

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

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

我调查了 e.dataTransfer.getData() 看它是否接受了其他可能有帮助的论点。另一种选择是 "Text"，其结果与 "URL".

相同

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

更新

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

有了第一张图片，我得到了我想要的：https://www.gstatic.com/webp/gallery/1.sm.jpg
对于第二个，我得到 http://www.google.com/，图像包含在 link 中，而不是图像地址。

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

Answer 1

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

The DataTransfer.types read-only property is an array of the drag data formats (as strings) that were set in the dragstart event. The order of the formats is the same order as the data included in the drag operation.

数组包含三个types:

text/plain
text/uri-list
text/html

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

通过将 "text/html" 传递给 .getData() 获取字符串，然后使用 RegExp 提取 html 字符串的 src 或创建一个元素并追加html 字符串到元素，然后使用 .src.

获取 <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/

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

Drag and drop images, and not links, between windows - HTML5

html

javascript

url

file-upload

droppable

更新