Как использовать событие drop в jQuery для загрузки файлов, перетаскиваемых с рабочего стола?

Question

Можно ли использовать событие jQuery drop для перетаскивания файлов с рабочего стола?

Если так, как я могу получить данные об удаленном файле?

Answer 1

Это немного грязно (вам нужно обработать как минимум 3 события), но это возможно.

Во-первых, вам нужно добавить обработчики событий для dragover и dragenter и предотвратить действия по умолчанию для этих событий, такие какчто:

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

На самом деле важно вызвать preventDefault для этих событий, в противном случае некоторые браузеры могут никогда не вызвать событие drop.

Затем вы можете добавить обработчик отбрасыванияи получить доступ к удаленным файлам с помощью 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);
        }
    }
);

Теперь вы можете перетаскивать файлы из рабочего стола / проводника / поиска в div и получать к ним доступ.

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