如果图像是链接，如何从拖放中获取图像 URL？

Posted 2023-02-22

【中文标题】如果图像是链接，如何从拖放中获取图像 URL？

【英文标题】：How to get image URL from drag &drop if the image is a link?

【发布时间】：2012-05-05 15:13:01

【问题描述】：

我发现了很多不同的拖放实现，但它们似乎都是在图像没有嵌套在 标记内的一般假设下运行的。

无论是浏览器、mac os还是windows，结果都是一样的：

拖动一个

< img src='http://www.lol.com/pic.jpg' />

将以 html 形式输入http://www.lol.com/pic.jpg。或者如果拖到桌面 - 它将保存实际图像。

拖动一个

< a href='http://www.lol.com/notgonnahappen.html'>< img src='http://www.lol.com/pic.jpg' />< /a>

在桌面上拖动会输入http://www.lol.com/notgonnahappen.html并创建一个URL链接。

是否有提取图像 URL 的方法？而不是它所关联的链接？ JS？爪哇？ C#？

【参考方案1】：

var data = $(e.dataTransfer.getData('text/html'));
var img = data.attr('src');
if (!img) 
    img = data.find("img").attr('src');

【讨论】：

e.dataTransfer.getData('text/html') 似乎只在 Chrome 中有效。 FF 使用外部图像失败，IE 完全失败。

【参考方案2】：

使用纯 javascript 你可以试试这个：

function drop(evt) 
    evt.stopPropagation();
    evt.preventDefault(); 
    var imageUrl = evt.dataTransfer.getData('text/html');
    var rex = /src="?([^"\s]+)"?\s*/;
    var url, res;
    url = rex.exec(imageUrl);
    alert(url[1]);

这是一个有效的DEMO