Ist es möglich, das jQuery- drop
Ereignis zum Ziehen von Dateien vom Desktop zu verwenden?
Wenn ja, wie erhalte ich die abgelegten Dateidaten?
Ist es möglich, das jQuery- drop
Ereignis zum Ziehen von Dateien vom Desktop zu verwenden?
Wenn ja, wie erhalte ich die abgelegten Dateidaten?
Antworten:
Es ist ein wenig chaotisch (Sie müssen mindestens 3 Ereignisse behandeln), aber möglich.
Zuerst müssen Sie Eventhandler für hinzufügen
dragover
unddragenter
und 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,
preventDefault
diese Ereignisse aufzurufen , da sonst einige Browser dasdrop
Ereignis 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/
quelle