检测dragenter跨浏览器解决方案上的文件类型 [英] Detect file type on dragenter cross browser solution

问题描述

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

  ev.originalEvent.dataTransfer.items [0] 。类型; 
  

但在Firefox，Safari和IE中，items规范还没有应用：

在拖放过程中，您将文件拖到当前所在页面上，当然您不希望此页面知道有关此文件的任何信息。这就是为什么在实际删除之前你无法获得有关拖动文件的信息。

---

但是，您可以检查上的文件类型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>尝试删除文件。< / p>  

对于拖放式浏览器支持，请参阅 caniuse.com 。

I'm searching for a cross browser solution for this. In advance i tell you that i don't want to know if is a file only, because i found solutions for that. I want to know if the file is an audio, image or video basically. In Chrome when you fire the dragenter event you can get that data from here:

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

But in Firefox, Safari and IE the "items" spec hasn't been applyed yet: https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/items

In those browsers you can only see the "files" attribute:

ev.originalEvent.dataTransfer.files[0];

But on dragenter files[0] is empty. How can i workaround this to know the file type in these other browsers?

Example (Only works on 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 version: you can't.

Quoting this answer:

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

It apply to both dragover and dragenter events.

Why? Well, it would be a serious privacy issue. Imagine that you have an MP3 file which for some reason you want to open in your browser. You can do that by dragging it and dropping on the browser tab bar, like that:

During the drag-and-drop process, you drag the file over the page on which you are currently on, and of course you don't want this page to know anything about this file. That's why you can't get information about dragged file until it has been actually dropped.

---

You can, however, check the file type on drop event:

"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>

For drag-and-drop browser support see caniuse.com.

这篇关于检测dragenter跨浏览器解决方案上的文件类型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！