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

Question

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

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

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

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

在那些浏览器中你只能看到"file"属性:

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 version:你不能。

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

引用 this answer :

DRAG_OVER DOES NOT HAVE THE RIGHTS to see the data in the drag event.

它适用于 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 .