将文件从桌面拖到浏览器时触发的Javascript事件是什么？

Question

我正在尝试实现类似于gmail的文件upoload系统.我已经完成了所有的Fileupload/AJAX问题,它完美无缺.我唯一的问题是用户反馈.

例如..在Gmail中,当你拖动文件到您的浏览器(假设IE9 +用户),还有弹出,让你在删除文件的区域.我认为这是某种形式的JavaScript事件是由一个框架捕获(让我们说Jquery),这让我可以在掉落区域制作一些很酷的动画.

我的问题很简单..我应该抓住什么事件才能做到这一点？有任何想法吗？我做错了吗？

Answer 1

主要事件是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处理程序只是在将东西拖入其中时更改拖放区的外观.