fängt Bild gezogen in ein Textfeld in Javascript

Question

Ich mag ein Benutzer ermöglichen, ein Bild von einer Webseite in meinen Web-App zu ziehen und dann speichern und die Bild-URL an anderer Stelle in der Anwendung verwenden. Also erstelle ich ein Eingabefeld als Ziehziel.

Aber da das ermöglicht es jedem ziehbar Web-Objekt löschen (wie Links), muss ich einige Fehlerprüfung tun. Ich könnte dort einen Knopf setzen, aber es wäre schöner, wenn der Tropfen automatisch erkannt wird.

Die Frage ist also ... gibt es irgendwelche Event-Handler - in erster Linie in IE7 und FF3 unterstützt -, die ausgelöst werden, wenn das Bild gelöscht wird? Führt es einfach ein Änderungsereignis auf dem Feld aus?

Answer 1

Sie werden nicht ein Standard-Events direkt nach dem Drag-and-Drop (nur nach außerhalb des Textfeldes zu klicken), aber vielleicht können Sie irgendeine Art von DragListener verwenden ...

Um zu überprüfen, ob die URL ist ein gültiges Bild, ist es am besten, die Erweiterung (JPG, PNG, GIF ...) zu überprüfen und zu überprüfen, ob die URL mit "file:" beginnt - wenn dies der Fall ist, verweist sie auf eine lokale Bilddatei und sollte ignoriert werden es.

Answer 2

Nein, meines Wissens gibt es keine Ereignisse, die, sobald Sie das Drop machen feuern werde.

Hier ist eine mögliche Lösung:

var input = document.getElementById("input"); 
var lastVal = input.value; 

setInterval(function() { 
    if (input.value !== lastVal) { 
    if (input.value) { 
     if (/\.(jpe?g|gif|bmp|png)(\?.*)?$/.test(input.value)){ 
     alert('It\'s an image URL!!!'); 
     } else { 
     alert('Not an image URL...'); 
     } 
    } 
    lastVal = input.value; 
    } 
}, 100); 

Demo hier: http://jsbin.com/izake

Hinweis: Es scheint, dass einige Browser (IE) nicht lassen Sie Elemente in Felder wie andere Browser fallen. Es kann sich lohnen, einen von Grund auf neu zu erstellen - wo alles auf der Seite ziehbar ist ...