file - HTML 5's File API - How to know what' 被拖上去了？

Question

我刚刚开始使用 HTML5 的文件 API。我已经能够模仿 imgur 的行为:当一个文件被拖到文档中时，会出现一个大的覆盖层，上面有一条消息，要放下以开始上传。

但是，我刚刚注意到一件事:如果您拖动页面中的任何元素(文本、图像)，就会显示叠加层。您可以在 imgur 上试用，这与我的代码发生的情况相同。

尽管在发布时，实际上什么也没有发生，因为脚本会检查是否有文件要上传。我的问题是，如何事先知道文档中拖了什么内容？起初我认为这是不可能的，因为 imgur 和所有 demos out有同样的问题。

令我惊讶的是，Gmail 可以检测到它是一个文件还是其他被拖拽的东西，但要追踪该片段是相当不可能的。

(如果您愿意，我可以提供代码，但它非常简单:事件 dragenter、dragover 和 drop 被添加到 document 元素，一切都按照演示中的方式处理)

谢谢。

更新

robertc 的回答是正确的，这似乎是检查 Firefox 的方法。通过反复试验，我找到了一种检查 Chrome 的方法:

event.originalEvent.dataTransfer.types.indexOf('Files')

如果没有文件，它将返回-1。所以你现在可以做类似的事情:

try {
    if(event.originalEvent.dataTransfer.types.indexOf('Files') == -1){
        return false;
    }
} catch(E){}

try {
    if(!event.originalEvent.dataTransfer.types.contains("application/x-moz-file")){
        return false;
    }
} catch(E){}

但是我认为这不是测试它的最佳方法，但是在 try 中添加两个条件将不起作用。

Answer 1

您必须在 dragover/dragenter 事件中测试拖动类型。在 Firefox 中，文件的类型为 application/x-moz-file 所以你可以做 some variation of this :

function checkDrag(event) {
    return event.dataTransfer.types.contains("application/x-moz-file");
}

我不确定其他浏览器的等效类型是什么。