Подтвердить что ты не робот

Определение типа файла в решении перекрестного браузера dragenter

Я ищу для этого кросс-браузерное решение. Заранее говорю вам, что я не хочу знать, является ли только файл, потому что я нашел для этого решения. Я хочу знать, является ли файл аудио, изображения или видео в основном. В Chrome, когда вы запускаете событие dragenter, вы можете получить эти данные здесь:

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

Но в Firefox, Safari и IE спецификация "items" еще не была применена: https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/items

В этих браузерах вы можете увидеть только атрибут "файлы":

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>
4b9b3361

ОТВЕТЫ

Ответ 1

tl; dr версия: вы не можете.

Цитата этот ответ:

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>