Как определить наличие HTML5 drag'n'drop API для загрузки файлов (например, из FF3.6)

Question

Я пишу приложение, которое должно поддерживать API перетаскивания HTML5 для файла, как описано выше здесь . Я хотел бы выполнить программную проверку того, поддерживает ли браузер этот тип безумия :) Решение, которое работает на данный момент, заключается в проверке, предоставляет ли браузер класс FileReader, например:

  if (typeof(FileReader) == "undefined") {
    $("#dropbox").hide();
  } else {
    // connect events
    $("#filebox").hide();
  }

Но, очевидно, это не правильно (я вообще не использую этот класс).

Есть идеи?

Answer 1

Проверка существования FileReader - правильный путь для этого. FileReader является официальной частью File Api . Я бы сочетал это с Modernizr . Поддержка перетаскивания запланирована для версии 1.2 . Вы должны быть в состоянии получить исходный код на GitHub и начать работать с этим сейчас. http://github.com/Modernizr/Modernizr/blob/master/modernizr.js

if (!!FileReader && Modernizr.draganddrop) {
  // sexy drag and drop action
} else {
  // no drag and drop support available :(
}

Если вы еще не видели Погружение в HTML5 , вам обязательно следует ознакомиться с предложениями Марка Пилигрима по обнаружению HTML5 .

Answer 2

Мне пришлось немного изменить ответ dshaw для поддержки в IE8:

if (!!window.FileReader && Modernizr.draganddrop) {
  // sexy drag and drop action
} else {
  // no drag and drop support available :(
}

Вы можете попробовать здесь

Answer 3

if ("files" in DataTransfer.prototype) {...}

Answer 4

Если вы вообще не хотите иметь дело с Modernizr, вы можете просто скопировать то, что он делает для обнаружения drag'n'drop:

var supportsDragAndDrop = function() {
    var div = document.createElement('div');
    return ('draggable' in div) || ('ondragstart' in div && 'ondrop' in div);
}

Получено из репозитория Modernizr GitHub:

https://github.com/Modernizr/Modernizr/blob/master/feature-detects/draganddrop.js

Answer 5

либо используйте чистый подход Modernizr

if (Modernizr.filereader && Modernizr.draganddrop) {
  //sexy drag and drop action
} else {
   //no drag and drop support available :(
};

или используйте базовую проверку DOM напрямую, но с обработкой исключений

var featuresSupported = false;
try {
   if (!!(window.File && window.FileList && window.FileReader) && Modernizr.draganddrop)
     featuresSupported = true;
)
catch (err)
{
}

if (featuresSupported)
  <do sexy effects>
else
  <perform rollback to legacy stuff>

Answer 6

if (!window.File || !window.FileReader || !window.FileList || !window.Blob) {
  alert('The File APIs are not fully supported in this browser. Please upgrade your browser.');
}

Answer 7

Этот код не работает в IE8. Это, вероятно, будет лучше:

if (typeof(FileReader) === 'function' && Modernizr.draganddrop) {
  //sexy drag and drop action
} else {
   //no drag and drop support available :(
};

Answer 8

Это немного сложнее. iOS7 сообщает, что поддерживает загрузку как FileReader, так и изображений draganddrop. Так как я искал более общую загрузку файла, которую я не мог сделать с iOS, мне нужен был другой ответ.

Modernizr выпуск 57 на здесь говорит о проблеме. Теперь с Windows 8 и сенсорным мышью, это сложно. В середине есть код от chriskeeble, который я успешно использовал. Он опирается на Modernizr и обнаружение агентов.