Что такое событие Javascript, которое запускается при перетаскивании файла с рабочего стола в браузер
Я пытаюсь реализовать систему загрузки файлов, похожую на gmail. Я уже сделал все проблемы Fileupload / AJAX, и он работает отлично. Единственная проблема, которая у меня есть отзывы пользователей.
например.. в gmail при перетаскивании файла в браузер (при условии, что пользователь IE9+) появляется область, позволяющая вам удалить файл. Я думаю, что это какое-то событие JavaScript, которое захватывается фреймворком (скажем, 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
обработчики существуют только для изменения внешнего вида зоны падения, когда материал перетаскивается в нее.
Это называется drop
, а свойства, необходимые для объекта event, будут находиться в свойстве originalEvent.
$(element).on("drop",function(e){
console.log(e.originalEvent)
});
вам также нужно развязать dragenter и dragleave на том же элементе, чтобы запустить событие drop, если я правильно помню.
$(element).on("dragenter dragleave", false);