javascript - ejemplos - Cómo determinar la presencia de la API de carga de archivos arrastrar y soltar HTML5(como la de FF3.6)

drag and drop jquery example

Question

Estoy escribiendo una aplicación que se supone que es compatible con la API de arrastrar y soltar HTML5 para archivos, como la que se describe here . Me gustaría realizar una verificación programática para ver si el navegador es compatible con este tipo de locura :) Una solución que funciona por ahora es verificar si el navegador proporciona una clase FileReader, como esta:

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

Pero obviamente no es la correcta (no uso esa clase en absoluto).

¿Algunas ideas?

Answer 1

Comprobar la existencia de FileReader es la forma correcta de hacerlo. FileReader es una parte oficial de File Api . Combinaría esto con Modernizr . El soporte para arrastrar y soltar está programado para la versión 1.2 . Debería poder obtener la fuente en GitHub y comenzar a trabajar con esto ahora. 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 :(
}

Si no has visto Dive into HTML5 , definitivamente deberías revisar las sugerencias de Mark Pilgrim para detectar HTML5 .

Answer 2

Es un poco más complicado. iOS7 informa de que admite tanto la carga de FileReader como la de arrastrar imágenes. Como buscaba una carga de archivos más general que no podía hacer con iOS, necesitaba otra respuesta.

El número 57 de Modernizr here habla sobre el tema. Ahora con Windows 8 y tanto el toque como el mouse, es complicado. Hay código en el medio por chriskeeble que usé con éxito. Se basa en la detección de agentes y modernizr.

Answer 3

Este código falla en IE8. Esto probablemente sería mejor:

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

Answer 4

Si no quieres lidiar con Modernizr, puedes replicar lo que hace para la detección de arrastrar y soltar:

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

Lo tengo desde el repositorio Modernitr GitHub:

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

Answer 5

Tuve que hacer un pequeño cambio en la respuesta de dshaw para soporte en IE8:

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

Puedes probarlo here

Answer 6

o bien usar el enfoque Modernizr puro

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

o use la verificación DOM subyacente directamente pero con manejo de excepciones

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 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.'');
}

Answer 8

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