Как получить URL удаленного (связанного) изображения?

Question

Я пытаюсь получить URL-адрес изображения, помещенного в div.Вот код, который я использую:

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

Дело в том, что оно прекрасно работает при перетаскивании несвязанных изображений (я получаю атрибут src элемента img), когда пытаюсь сделатьэто с изображениями, которые они являются ссылками (<a href="..."><img src="..."></a>), я получаю атрибут href элемента a вместо атрибута src элемента img.

Есть идеи?

Меня не волнует совместимость браузера, я хочу, чтобы он работал только в Firefox (или Chrome).

Редактировать: Вот как это выглядит: http://jsfiddle.net/SPdHR/2/

(похоже, работает только в Firefox)

Answer 1

Вы можете попробовать это:

$('#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

Answer 2

Мой предпочтительный метод - использовать поиск по регулярному выражению текста dataTransfer, чтобы найти строку, начинающуюся с 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);
    }
});

Answer 3

Вы должны использовать после кода выше

 $('#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);
});

Answer 4

Вы должны попробовать:

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