测试拖放事件是否包含文件 | CSS-Tricks

HTML5 拖放功能非常适合处理文件上传。但如果这是您唯一的使用场景，那么了解某个特定的 dragenter 或 dragover 事件是否实际包含文件会很有用。例如，与仅仅拖动一些选定的文本不同。

将事件对象发送到此函数，它将返回真值（假设您使用的是支持所有这些功能的浏览器支持所有这些功能）。

function containsFiles(event) {

    if (event.dataTransfer.types) {
        for (var i = 0; i < event.dataTransfer.types.length; i++) {
            if (event.dataTransfer.types[i] == "Files") {
                return true;
            }
        }
    }
    
    return false;

}

dgriesel

# 2013年8月13日

如何解决这个问题？

if ( t = event.dataTransfer.types )
    return t.contains("Files")

tbruun

评论永久链接# 2014年1月14日

请注意，Firefox 中的 types 是一个 DOMStringList，而在 Chrome 中它是一个 Array。您可以使用 types.indexOf("Files") !== -1，但这不适用于 DOMStringList。此时，您不妨使用作者的解决方案。

Jeff Ayer

# 2014年4月7日

IE9+ 的另一种方法

containsFiles = function(e) {
    var dataType = Array.prototype.slice.call(e.dataTransfer.types);

    dataType = dataType.filter(function(e) {
        return e == "Files";
    });

    return dataType.length;
}

Vclav

# 2016年6月3日

更简单、更高效的版本

isEventWithFiles(event) {
    var temp = (event.originalEvent || event).dataTransfer;
    return temp && (temp = temp.types) && temp[0] === 'Files';
}

PS：适用于任何事件，即使是 jQuery 事件对象。

Marek

评论永久链接# 2018年12月4日
更好的方法是
```
return temp && (temp = temp.types) && (temp.indexOf('Files') != -1);
```
因为 Firefox 的类型为 Array [ "application/x-moz-file", "Files" ]

评论

发表评论 取消回复

发表评论取消回复