File HTML5'；s文件API-如何知道什么'；他被拖下去了？

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

但是，我注意到了一件事：如果你拖动页面中的任何元素（文本、图像），就会显示覆盖图。你可以试一下，这和我的代码一样

尽管在发布时，实际上什么也没有发生，因为脚本将检查是否有要上载的文件。我的问题是，如何事先知道文档中拖拽了什么？起初我认为这是不可能的，因为imgur和那里的所有人都有相同的问题

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

（如果您愿意，我可以提供代码，但是它非常简单：事件

dragenter

，

dragover

和

drop

被添加到

文档

元素中，并且一切都像在演示中一样处理）

谢谢

更新 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

中添加这两个条件将不起作用。

您必须在

dragover

/

dragenter

事件中测试拖动类型。在Firefox中，文件的类型为

application/x-moz-file

，因此您可以执行以下操作：

---

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

我使用此选项忽略handleDrop（事件）中拖动的URL、文本等（非文件）：

---

但它不捕捉文件夹

你说得对！谢谢我已经更新了我的问题，使之成为跨浏览器的问题（至少增加了对Chrome的支持）。@metrobalderas在WebKit前端找到了一个很好的发现，你可以用类似@metrobalderas的东西来清理你的代码，但这并不意味着你不能从其他框架中窃取好的代码；）我不确定

Try的依赖项是什么样的。但是，这些
可能太多了。
function checkDrag(event) {
    return event.dataTransfer.types.contains("application/x-moz-file");
}

if(typeof event.dataTransfer.files == "undefined" || 
     event.dataTransfer.files.length == 0)
        return;