jquery - 当您将文件从桌面拖到浏览器时触发的 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 处理程序只是为了在将内容拖入拖放区域时更改拖放区域的外观。