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

Question

Estoy escribiendo una aplicación que se supone que es compatible con la API arrastrar/soltar HTML5 para archivos, al igual que el here descrito. me gustaría realizar una comprobación programática de si el soporte del navegador este tipo de locura :) Una solución que funciona por ahora está comprobando si el navegador proporciona una clase FileReader, así:

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

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

¿Alguna idea?

Answer 1

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

Answer 2

Comprobar la existencia de FileReader es la forma correcta de hacerlo. FileReader es una parte oficial de File Api. Yo combinaría esto con Modernizr. El soporte para arrastrar y soltar es slated for release 1.2. Debería poder tomar 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 usted no ha visto Dive into HTML5, que sin duda debe comprobar fuera de las sugerencias de Mark Pilgrim en detecting HTML5.

Answer 3

tuviera que hacer un pequeño cambio en la respuesta dshaw 's para el apoyo en IE8:

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

Puede probarlo here

Answer 4

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 5

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 6

o bien utilizar el enfoque de Modernizr pura

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

o utilizar cheque DOM subyacente directamente, sino con el manejo de

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

Si no' excepción No quiero tratar con Modernizr, puedes simplemente replicar lo que hace para dr detección ag'n'drop:

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

que ya ha recibido repositorio GitHub Modernizr:

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

Answer 8

Es un poco más complicado. iOS7 informa que es compatible con la carga de imágenes de FileReader y draganddrop. Como buscaba una carga de archivo más general que no podía hacer con iOS, necesitaba otra respuesta.

Modernizr issue 57 at here habla sobre el problema. Ahora con Windows 8 y Touch y Mouse, es complicado. Hay un código en el medio por chriskeeble que utilicé con éxito. Se basa en Modernizr y detección de agentes.