如何獲取丟棄（鏈接）圖像的URL？

我試圖檢索一個圖像的網址，放入一個div。這是我使用的代碼：如何獲取丟棄（鏈接）圖像的URL？

$('#dropzone') 
    .bind('dragenter dragover', false) 
    .bind('drop', function(e) { 
     e.stopPropagation(); 
     e.preventDefault(); 
     alert(e.dataTransfer.getData('text')); 
    });

事情是，雖然它拖放未鏈接的圖像時（我得到了img元素的src屬性），當我嘗試用他們的圖像做這個偉大工程鏈接（<a href="..."><img src="..."></a>），我得到a元素的href屬性，而不是img元素的src屬性。

任何想法？

我不關心瀏覽器兼容性，我只想讓它在Firefox（或Chrome）中工作。

編輯：下面是它的樣子：http://jsfiddle.net/SPdHR/2/

（似乎是在Firefox中唯一的工作方式）

來源

2012-02-20 Mike

請參閱http://stackoverflow.com/a/19564982/746754。 – acarlon 2013-10-24 11:46:27

你應該嘗試：

$(e.target).find("img")

來源

2012-02-20 05:51:59 elrado

謝謝，但說實話，我不知道如何在這種情況下使用它。你可以看看我剛剛添加的小提琴嗎？謝謝！ – Mike 2012-02-20 08:20:41

根據Chrome的控制檯，「e.target」是拖動目標，即'

DRAG A KITTEN HERE

'。 – 2012-02-20 10:07:06

後，您應該使用以上代碼

$('#dropzone') 
.bind('dragenter dragover', false) 
.bind('drop', function(e) { 
    e.stopPropagation(); 
    e.preventDefault(); 

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

     alert(img); 
});

來源

2013-07-30 05:58:37

你可以試試這個：

$('#target') 
    .bind('dragenter dragover', false) 
    .bind('drop', function(e) { 
     e.stopPropagation(); 
     e.preventDefault(); 
     var imageUrl = e.dataTransfer.getData('text/html'); 
    if($(imageUrl).children().length > 0){ 
     var url = $(imageUrl).find('img').attr('src'); 
    }else{   
     var url = $(imageUrl).attr('src'); 
    } 
     $('#result').html(url); 
    });

它的工作原理上都Firefox和Chrome（最新版本）
見更新FIDDLE

來源

2014-02-05 14:09:18 laaposto

我的首選方法是使用正則表達式搜索的數據傳遞文本的查找以http：//開頭並以「（但不包括結果中的」結尾）結尾的字符串。

$('#dropzone') 
.bind('dragenter dragover', false) 
.bind('drop', function(e) { 
    e.stopPropagation(); 
    e.preventDefault(); 
    if(e.dataTransfer.files.length>0){ 
     //Handle the local file 
    } 
    else{ 
     //Find the url embedded in the dataTransfer data 
     var data = e.dataTransfer.getData("text/html"); 
     var matches = data.match(/http:\/\/.*(?=")/gi); 
     var url = (matches || [false])[0]; //returns the url or false if no match found 

     //Do whatever with the url 
     console.log(url); 
    } 
});

來源

2014-03-03 21:23:28 Brooks

如何獲取丟棄（鏈接）圖像的URL？

回答

相關問題