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

Posted 2023-05-08

【中文标题】在窗口之间拖放图像，而不是链接 - HTML5

【英文标题】：Drag and drop images, and not links, between windows - HTML5

【发布时间】：2017-05-14 07:03:41

【问题描述】：

我正在尝试在 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 一个）。

【参考方案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/

【讨论】：

感谢您的快速回答。但这仅适用于我拥有的页面。

@noodlesup 不确定您的意思？打开一个单独的选项卡，加载一个新的 jsfiddle 编辑器，包括 <teaxtarea> 元素。从答案处的 jsfiddle 链接拖动图像，并将拖动的图像放在 <textarea> 的单独选项卡中。

这仅适用于我可以运行此脚本的页面、我拥有并可以编辑的页面。如何从外部网站获取此行为？

您可以使用document.images在console获取document中所有图像的src。

我不知道 text/html 参数。 e.dataTransfer.getData("text/html") 绝对有效，谢谢！