0

我正在构建一个 HTML5 文件上传,并且我希望当用户将文件拖到窗口上时触发 dragenter。这个想法是 dragenter 将触发灯箱样式覆盖,显示放置区域。

这是我的代码。(jQuery)

$(window).bind('dragenter', function (e) {
    e.stopPropagation();
    e.preventDefault();
    $('#uploadWrapper').show();
}).bind('dragexit', function (e) {
    e.stopPropagation();
    e.preventDefault();
    $('#uploadWrapper').hide();
});

这工作正常,但如果用户抓取图像或一些文本并拖动它,它也会触发 dragenter 事件。有没有办法告诉我正在拖动什么,所以只有实际文件上传触发显示覆盖?

谢谢..

4

1 回答 1

3

我认为像下面这样的东西应该有效;(虽然我认为它对 Opera 不友好。)

function DraggedFiles(e)
{
    for (n in e.dataTransfer.types)
    {
        if (e.dataTransfer.types[n] === "Files") return true;
    }

    return false;
}

然后,对于您的dragEnter活动,只需添加:

if (DraggedFiles(e))
{
    // files were dragged onto here
} else {
    // something other than files were dragged
}

您要在哪里进行检查并执行操作/不作为。

于 2011-12-22T00:37:00.670 回答