Wie verwende ich das Drop-Ereignis von jQuery, um Dateien hochzuladen, die vom Desktop gezogen wurden?

Antworten:

150

Es ist ein wenig chaotisch (Sie müssen mindestens 3 Ereignisse behandeln), aber möglich.

Zuerst müssen Sie Eventhandler für hinzufügen dragoverund dragenterund verhindern , dass die Standardaktionen für diese Ereignisse wie folgt aus:

$('#div').on(
    'dragover',
    function(e) {
        e.preventDefault();
        e.stopPropagation();
    }
)
$('#div').on(
    'dragenter',
    function(e) {
        e.preventDefault();
        e.stopPropagation();
    }
)

Es ist tatsächlich wichtig, preventDefaultdiese Ereignisse aufzurufen , da sonst einige Browser das dropEreignis möglicherweise nie auslösen .

Anschließend können Sie den Drop-Handler hinzufügen und auf die abgelegten Dateien zugreifen mit e.originalEvent.dataTransfer.files:

$('#div').on(
    'drop',
    function(e){
        if(e.originalEvent.dataTransfer && e.originalEvent.dataTransfer.files.length) {
            e.preventDefault();
            e.stopPropagation();
            /*UPLOAD FILES HERE*/
            upload(e.originalEvent.dataTransfer.files);
        }
    }
);

Jetzt können Sie Dateien vom Desktop / Explorer / Finder im div ziehen und darauf zugreifen.

http://jsfiddle.net/fSA4N/5/

Alex
quelle
9
Warum müssen Sie das Standardverhalten von Dragover und Dragenter unterdrücken?
Chris Martin
2
Einige Browser machen einige seltsame Dinge, wenn Sie eine Datei in den Browser ziehen. Es ist nicht wirklich notwendig. Mit diesen Ereignissen können Sie auch einige nette Funktionen hinzufügen, z. B. das Hervorheben des Div, in dem Sie die Datei ablegen müssen.
Alex
Ist es möglich, e.originalEvent.dataTransfer.files irgendwie zu verwenden und auf Dateieingabe zu setzen?
Ioleo
2
Sie sagten "nicht einfach" ...? Ihre Antwort löste mein Problem sofort! @loostro: Es ist möglich, eine "globale" Variable namens "Datei" zu haben und $ (': Datei') zu verwenden. change () icwetarget.files [0] (funktioniert für mich) oder vielleicht $ ('this ') .val ();
Leo
3
Neben "Einige Browser machen einige seltsame Dinge": Wenn Sie Ihr Ziehziel beispielsweise durch Ziehen einer Bilddatei verfehlen, besteht das Standardverhalten einiger Browser, z. B. Firefox, darin, die Datei im Fenster zu öffnen. Um dies zu umgehen, binden Sie den Dokumentkörper an die Dragover- und Drop-Ereignisse und brechen Sie sie ab (mit PreventDefault / StopPropagation).
David G