28

我跑了一个快速的 google 和 SO 搜索，发现了类似的问题，但没有一个是正确的，而且大多数都是旧的，看起来被遗弃了（没有答案，有一段时间没有评论）。所以这里...

我希望能够收集从另一个网站拖放到我的网站上的图像的 url（只有 url）..（即我打开了两个 chrome 窗口。窗口 A 有我的应用程序。窗口 B 有 imgur 在它. 我打开一个图片点击并将其拖到我的窗口然后放手。现在我需要知道在我的页面上放置的图片的url）。

这是我用于本地文件的代码。

$(document).on('drop', function(e) {
    var data = e.dataTransfer || e.originalEvent.dataTransfer;
    console.log(data); // data.files is empty
    e.preventDefault();
    return false;
});​

同样，我不想上传任何东西.. 我不想做任何花哨的事情...我只需要知道从另一个网站拖放到页面上的图像的位置。

4

3 回答 3

19

试试这个：http: //jsfiddle.net/2Jet2/70/

$(document).on('dragover', function(e) {
     e.preventDefault();
});
$(document).on('drop', function(e) {
    e.preventDefault();
    e.originalEvent.dataTransfer.items[0].getAsString(function(url){
        alert(url);
    });
});​

"http://static3.flattr.net/thing/image/9/4/5/5/0/huge.png?1326712342"当我从另一个浏览器窗口拖动该图像时，我得到了。

.getAsString接受一个回调，一旦它被调用，它就会将 url 作为参数

在火狐上不起作用

于 2012-06-26T19:02:04.930 回答
6

你可以用这个

$(document).bind('drop', function (e) {        
    var url = $(e.originalEvent.dataTransfer.getData('text/html')).filter('img').attr('src');
    if (url) {
        jQuery('<img/>', {
            src: url,
            alt: "resim"
        }).appendTo('#yourId');            
    }
    return false;
})
于 2012-08-29T07:56:15.430 回答
2

根据尤努斯的回答，这似乎适用于 FF：

e.originalEvent.dataTransfer.getData('text/html').match(/src\s*=\s*"(.+?)"/)[1]
于 2013-10-09T09:43:20.990 回答