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

Ist es möglich, das jQuery- dropEreignis zum Ziehen von Dateien vom Desktop zu verwenden?

Wenn ja, wie erhalte ich die abgelegten Dateidaten?

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/