Что такое событие Javascript, которое запускается при перетаскивании файла со своего рабочего стола в ваш браузер?

Question

Я пытаюсь реализовать систему upoload для файлов, похожую на gmail. Я уже делал все проблемы с Fileupload/AJAX, и он отлично работает. Единственная проблема, с которой я столкнулся, - Обратная связь с пользователем.

Например, в gmail, когда вы перетаскиваете файл в свой браузер (при условии, что пользователь IE9 +), появляется область, позволяющая отбросить файл. Я думаю, что это какое-то событие JavaScript, которое захваченный каркасом (скажем, JQuery), который позволяет мне создавать классные анимации в области перетаскивания.

Мой вопрос прост .. Какое событие я должен сделать для этого? Есть идеи? Я делаю это неправильно?

Answer 1

Главным событием является только drop.

Вам также потребуется обработать dragenter и dragleave, иначе действие drop просто вызовет загрузку отброшенных файлов. Вы также можете дополнительно посмотреть dragover.

У меня есть некоторый код, который регистрирует эти обработчик, например, так:

var $dz = $('#dropzone'); 
$dz.on({ 
    dragenter: dragenter, 
    dragleave: dragleave, 
    dragover: false, 
    drop: drop 
}); 

function dragenter() { 
    $dz.addClass('active'); 
}; 

function dragleave() { 
    $dz.removeClass('active'); 
}; 

function drop(e) { 
    var dt = e.originalEvent.dataTransfer; 
    if (dt) { 
     var files = dt.files; 
     ... 
    } 
    $dz.removeClass('active'); 
}; 

В этом случае dragenter и dragleave обработчиков там просто изменить внешний вид зоны перетаскивания, когда материал затягиваются в него.

Answer 2

Это называется drop, а свойства, необходимые для объекта события, будут находиться в свойстве originalEvent.

$(element).on("drop",function(e){ 
    console.log(e.originalEvent) 
}); 

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

$(element).on("dragenter dragleave", false);