Javascript 检测dragenter跨浏览器解决方案上的文件类型

我正在为此搜索跨浏览器解决方案。事先我告诉你，我不想知道是否只是一个文件，因为我找到了解决方案。我想知道文件基本上是音频、图像还是视频。在Chrome中，当您触发dragenter事件时，您可以从以下位置获取数据：

ev.originalEvent.dataTransfer.items[0].type;

但在Firefox、Safari和IE中，“项目”规范尚未应用：

在这些浏览器中，您只能看到“文件”属性：

ev.originalEvent.dataTransfer.files[0];

但在dragenter

上，文件[0]

为空。我如何解决这个问题以了解其他浏览器中的文件类型

示例（仅适用于Chrome）：

$（文档）.on（'dragenter'，'drop zone'，函数（ev）{
var e=ev.原始事件；
e、 dataTransfer.dropEffect='copy'；
var file=e.dataTransfer.items[0]；
var type=file.type.slice（0，file.type.indexOf（'/'）；
$（ev.target）.html（类型）；
});
$（文档）.on（'dragleave'，'drop zone'，函数（ev）{
$（ev.target.html（'将您的文件拖到这里以了解类型，无需拖放它'）；
});

将您的文件拖到此处以了解类型，无需将其拖放
tl；dr版本：您不能

引述：

“拖动”没有在拖动事件中查看数据的权限

它适用于
dragover
和
dragenter
事件

为什么?？嗯，这将是一个严重的隐私问题。假设您有一个MP3文件，出于某种原因，您希望在浏览器中打开它。您可以通过将其拖放到浏览器选项卡栏上来完成此操作，如下所示：


在拖放过程中，您将文件拖到当前所在的页面上，当然您不希望此页面了解有关此文件的任何信息。这就是为什么在实际删除拖动的文件之前，您无法获取有关该文件的信息


但是，您可以在
drop
事件上检查文件类型：


“drop dragover”.split（“”）.forEach（函数（eventName）{
document.addEventListener（事件名称、函数（事件）{
event.preventDefault（）；
});
});
document.addEventListener（“drop”），函数（事件）{
console.log（event.dataTransfer.files[0].type）；
});
html，正文{
身高：100%；
}
尝试删除文件。
数据​转移​.项目
似乎是唯一的可能性，只有Safari和IE不支持它。
我认为这并不能回答我的问题。目前，我可以通过“DataTransfer.items”属性了解拖动事件（Chrome）中的文件类型。规范中说：“DataTransfer.items属性是拖动操作中数据传输项的列表。该列表包含操作中每个项的一个项，如果操作中没有项，则列表为空。”；但是在其他浏览器中，这个规范还没有应用。我的问题是，今天是否有任何解决办法。另外，我的问题不是关于坠落事件。“我已经知道该怎么做了。”“乔纳桑卡布，你不能这么做。正如我已经写的，这将是一个安全问题。如果它能在Chrome中工作（我怀疑，这是代码片段还是没有发生），这是一个bug，而不是一个特性。我不认为这是一个错误，如果你阅读规范，它会做它说应该做的。@JonathanCalb即使你是对的，我认为目前还没有跨浏览器的解决方案。这没有回答我的问题。你最终的反应是，你认为目前还没有跨浏览器的解决方案。如果这是您的最终答案，我需要您详细解释。是否尝试使用
input type=“file”
？