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

Question

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

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

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

编辑：截至 2021 年底，此功能现已广泛支持。

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

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;博士版本：你不能.

编辑： 截至 2021 年底，现在您可以，因为

Data​Transfer​.items

现在广泛支持。

引用这个答案：

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

似乎是唯一的可能性。 Firefox支持，只有Safari和IE不支持

Answer 3

在这里没有找到答案，但是这个解决方案对我有帮助：

只需检查

event?.dataTransfer?.types

事件dragenter.

['Files'], ['text/plain', 'text/html'] 等类型