首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >将文件从桌面拖到浏览器时触发的Javascript事件是什么

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

Stack Overflow用户
提问于 2012-01-31 00:27:33
回答 2查看 2.2K关注 0票数 6

我正在尝试实现一个类似于gmail的文件上传系统,我已经完成了Fileupload / AJAX的所有问题,它工作得很完美。我唯一的问题是用户反馈。

例如..在gmail中,当你把一个文件拖到你的浏览器上(假设是IE9+用户),会弹出一个区域,让你把文件放进去。我认为它是某种由框架(比如说Jquery)捕获的JavaScript事件,它允许我在拖放区域制作一些很酷的动画。

我的问题很简单..要执行此操作,我应该捕获什么事件?有什么想法吗?我做错了吗?

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-01-31 00:31:38

主要事件就是drop。

您还需要处理dragenter和dragleave,否则删除操作只会导致加载已删除的文件。你也可以选择观看dragover。

我有一些注册这些处理程序的代码,如下所示:

代码语言:javascript
复制
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
EN

Stack Overflow用户

发布于 2012-01-31 00:32:23

它名为drop,事件对象中所需的属性将位于originalEvent属性中。

代码语言:javascript
复制
$(element).on("drop",function(e){
  console.log(e.originalEvent)
});

如果我没记错的话,您还需要解除dragenter的绑定并在相同的元素上拖动event,这样它才能触发drop事件。

代码语言:javascript
复制
$(element).on("dragenter dragleave", false);
票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/9067184

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档