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

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

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

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

6
drag-and-drop file-upload gmail jquery

2 ответов

главное событие просто 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 обработчики существуют только для изменения внешнего вида зоны падения, когда материал перетаскивается в нее.

8

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

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

вам также нужно развязать dragenter и dragleave на том же элементе, чтобы запустить событие drop, если я правильно помню.

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