在dragenter跨浏览器解决方案中检测文件类型
我正在为此寻找一个跨浏览器解决方案。 我事先告诉你，我不想知道是否只是一个文件，因为我找到了解决方案。 我想知道该文件是否基本上是音频，图像或视频。 在Chrome中，当您触发dragenter事件时，您可以从这里获取该数据：
ev.originalEvent.dataTransfer.items[0].type;
但在Firefox，Safari和IE中，“items”规范尚未应用：https：//developer.mozilla.org/en-US/docs/Web/API/DataTransfer/items
在这些浏览器中，您只能看到“文件”属性：
ev.originalEvent.dataTransfer.files[0];
但是在dragenter files[0]是空的。 我该如何解决这个问题才能知道这些其他浏览器中的文件类型？
示例（仅适用于Chrome）：
$(document).on('dragenter', '.drop-zone', function(ev) {
var e = ev.originalEvent;
e.dataTransfer.dropEffect = 'copy';
var file = e.dataTransfer.items[0];
var type = file.type.slice(0, file.type.indexOf('/'));
$(ev.target).html(type);
});
$(document).on('dragleave', '.drop-zone', function(ev) {
$(ev.target).html('Drag your file over here to know the type, no need to drop it');
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="drop-zone">Drag your file over here to know the type, no need to drop it</div>tl; dr版本：你不能。
引用这个答案：
DRAG_OVER没有权利在拖动事件中查看数据。
它适用于dragover和dragenter事件。
为什么？ 那么，这将是一个严重的隐私问题。 想象一下，你有一个MP3文件，出于某种原因，你想在浏览器中打开它。 你可以通过拖动它并拖放浏览器标签栏来实现，如下所示：
在拖放过程中，将文件拖动到当前所在的页面上，当然，您不希望此页面知道有关此文件的任何信息。 这就是为什么直到实际拖放文件才能获取有关拖动文件的信息的原因。
但是，您可以检查drop事件的文件类型：
"drop dragover".split(" ").forEach(function(eventName) {
document.addEventListener(eventName, function(event) {
event.preventDefault();
});
});
document.addEventListener("drop", function(event) {
console.log(event.dataTransfer.files[0].type);
});html, body {
height: 100%;
}<p>Try dropping a file.</p>