当您将文件从桌面拖到浏览器时触发的 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和dragleave，以便它触发放置事件。

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