javascript - img - Arrastra y suelta imágenes de otro sitio web a la mía.

img html title

Question

Hice una búsqueda rápida en Google y SO y encontré preguntas similares, pero ninguna estaba bien formada y la mayoría eran viejas y parecían abandonadas (sin respuestas y sin comentarios por un tiempo). Así que aquí va ...

Quiero poder recopilar la url (solo la url) de una imagen colocada en mi sitio desde otro sitio web ... (es decir, tengo dos ventanas cromadas abiertas. La ventana A tiene mi aplicación. La ventana B tiene imgur. . Abro una imagen, la arrastro a mi ventana y la suelto. Ahora necesito saber la URL de la imagen que se dejó caer en mi página).

Aquí está el código con el que estaba trabajando para los archivos locales.

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

Una vez más, no quiero cargar nada ... no estoy tratando de hacer nada sofisticado ... solo necesito saber la ubicación de la imagen que se está colocando en la página desde otro sitio web.

Answer 1

Prueba esto: 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);
    });
});​

Aparece "http://static3.flattr.net/thing/image/9/4/5/5/0/huge.png?1326712342" Cuando arrastré esa imagen desde otra ventana del navegador.

.getAsString toma una devolución de llamada que obtiene la url como argumento una vez que se llama

No funciona en firefox

Answer 2

Puedes usar esto

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

Answer 3

Según la respuesta de Yunus, esto parece funcionar en FF:

e.originalEvent.dataTransfer.getData(''text/html'').match(/src/s*=/s*"(.+?)"/)[1]