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

Question

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

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

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

Answer 1

Основным событием является просто drop.

Вам также потребуется обработать dragenter и dragleave, в противном случае действие удаления приведет только к загрузке удаленных файлов.При желании вы также можете посмотреть 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 и draggleave на этом же элементе, чтобы онзапустить событие сброса, если я правильно помню.

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