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

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

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

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

Любые идеи?

Ответы

Ответ 1

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

Ответ 2

Проверка наличия 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, обязательно проверьте предложения Mark Pilgrim на обнаружение HTML5.

Ответ 3

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

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

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

Ответ 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

Ответ 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>

Ответ 6

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

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

Ответ 7

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

Ответ 8

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

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