在 Dragenter 跨浏览器解决方案上检测文件类型

Question

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

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

但在 Firefox、Safari 和 IE 中，“items”规范尚未应用： https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/items

编辑：截至 2021 年底，此功能现在为 widely supported。

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

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>

Answer 1

tl;dr 版本：你不能。

编辑：截至 2021 年底，现在您可以，因为 Data​Transfer​.items 现在是 widely supported。

引用this answer:

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>

有关拖放浏览器支持，请参阅caniuse.com。

Answer 2

Data​Transfer​.items 似乎是唯一的可能性。 It is now supported on Firefox，只有Safari和IE不支持。