检测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

在这些浏览器中,您只能看到"files"属性:

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

引用这个答案:

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.