Comment faire pour déterminer la présence de HTML5 drag'n'drop de téléchargement de fichiers API (comme celle de FF3.6)

Je suis en train d'écrire une application qui est censé supporter HTML5 glisser/déposer de l'API pour les fichiers, un peu comme le décrit ici.
Je voudrais effectuer une programmatiques vérifier si le navigateur prend en charge ce genre de folie 🙂
Une solution qui fonctionne pour l'instant est de vérifier si le navigateur fournit un FileReader classe, comme ceci:

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

Mais il n'est évidemment pas correct (je n'ai pas l'utilisation de cette classe à tous).

Des idées?

InformationsquelleAutor konryd | 2010-02-22
  1. 11
    if ("files" in DataTransfer.prototype) {...}
    • il a besoin prototype.js si
    • Pas de. le prototype est l'un des principaux JS construction de programmation. en.wikipedia.org/wiki/JavaScript
    • Voir mckoss.com/jscript/object.htm pour une meilleure exploration des de JS prototypes d'objets.
    • Je ne sais pas pourquoi mais le code suivant ne fonctionne pas sur Chrome si ("fichiers" dans DataTransfer.prototype) {alert('Glisser-Déposer de soutien est-il');} Il dit ... Uncaught ReferenceError: DataTransfer n'est pas défini. Pouvez-vous s'il vous plaît aider...
    • webkit n'expose pas l'objet DataTransfer, voir github.com/Modernizr/Modernizr/issues#issue/57
    • pourquoi n'est pas quelqu'un parler de la façon dont la bibliothèque JS Prototype a obtenu son nom, ici. Il a commencé à sa base par l'ajout de fonctionnalités, majorly en modifiant les prototypes des objets natifs - c'est ce que j'ai lu
    • Pourquoi est-ce marqué comme étant correcte, alors qu'elle ne l'est pas? Au moins pas de la croix-navigateur.

    InformationsquelleAutor Paul Rouget
  2. 19

    De vérifier l'existence de FileReader est la bonne façon d'aller à ce sujet. FileReader est une partie officielle de la Fichier Api. Je voudrais combiner cela avec Modernizr. Faites glisser et Déposez le soutien est prévu pour la version 1.2. Vous devriez être en mesure de saisir la source sur GitHub et de commencer à travailler avec maintenant.
    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 vous n'avez pas vu Plongez dans HTML5, vous devriez certainement vérifier de Mark Pilgrim suggestions sur la détection de HTML5.

    • Je ne suis pas sûr que ce serait le travail. Il vérifie la présence d'attributs ondrag, ondrop, ondragleave etc. dans un div objet. Cela fonctionne dans Chrome, mais ne peut toujours pas vous laisser glisser-déposer les fichiers dans un site web.
    • reader = new FileReader(); if (lecteur && Moderniste.draganddrop) {}... Besoin de test.
    • Mis à jour ma suggestion d'inclure vérifier l'objet FileReader, si si!!FileReader) {} peut être suffisant. 🙂 J'ai testé cette dans FF3.6 et Chrome et ça fonctionne.
    • Viens de réaliser que, comme je le pensais à ça, vous l'aviez mentionné que vous avez pensé de l'évaluation de la présence de FileReader était incorrecte. Même si vous n'allez pas utiliser l'implémentation native, FileReader est officiel spec et la détection de l'appui de cette fonctionnalité est la bonne façon d'aller à ce sujet. dev.w3.org/2006/webapi/FileAPI/#filereader-interface
    • Un dernier commentaire: Si vous allez rouler vos propres FileReader, vous devriez assurez-vous de mettre en œuvre l'interface officielle. w3.org/TR/FileAPI/#dfn-filereader de Cette façon, vous serez en mesure de déposer votre mise en œuvre une fois que le FF travaux de mise en œuvre de la façon dont vous avez besoin pour le travail et les autres navigateurs commencent à mettre en œuvre.
    • J'ai presque vendu, mais cela signifie, que chaque fois qu'un navigateur implémente FileReader (API qui vous permet de lire aussi de <entrées type=file>) il met également en œuvre un glisser-déposer des fichiers à partir de desktopinto le navigateur. Ceux-ci sont séparées des fonctions. Le spec dire qu'ils ont besoin de se réunir?
    • C'est assez: si ("fichiers" dans DataTransfer.prototype) {...}
    • Je ne pense pas qu'ils doivent être, mais je suppose que ce que vous faisiez nécessite à la fois. Vous devriez vraiment envisager de Paul suggestion. N'ai pas testé moi-même, mais Paul est un Mozilla Tech Évangéliste. twitter.com/paulrouget j'avais reporter à plus de son expérience.
    • Je l'ai regardé: w3.org/TR/html5/...
    • if (!!FileReader) dans IE8 lance un "FileReader est pas défini" erreur
    • Juste par curiosité, pourquoi if(!!window.FileReader) au lieu de if(window.FileReader) ?
    • Je pense que c'est parce que le double point d'exclamation, ce qui le force à être un booléen.
    • pour IE8 vous avez besoin window.FileReader. Voir ma réponse pour l'exemple complet.

    InformationsquelleAutor dshaw
  3. 17

    J'ai dû faire un léger changement de dshaw's réponse pour le soutien dans IE8:

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

    Vous pouvez l'essayer ici

    • Vous avez besoin !!de la fenêtre.FileReader dans IE9 aussi.
    • Vous pouvez inclure le Modernizr.filereader qui a la meilleure couverture de l'ensemble des navigateurs.
    • Peut-être que je ne connais pas assez bien le JavaScript, mais il est le !! nécessaire? N'est pas la déclaration !!window.FileReader équivalent à window.FileReader ?
    • c'est une manière obscure de l'objet de contrainte de type dans un booléen... Pas particulièrement lisible JS nouveaux arrivants, désolé! stackoverflow.com/questions/784929/...
    InformationsquelleAutor matt burns
  4. 3

    Si vous ne voulez pas avoir affaire avec Modernizr à tous, vous pouvez simplement reproduire ce qu'il fait pour drag'n'drop de détection:

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

    L'ai eu à partir de Modernizr GitHub:

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

    InformationsquelleAutor German Latorre
  5. 2

    utiliser pure Modernizr approche

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

    ou l'utilisation sous-jacente DOM vérifier directement mais avec la gestion des exceptions

    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>
    InformationsquelleAutor Alfishe
  6. 1

    Ce code ne fonctionne pas avec IE8.
    Ce serait probablement mieux:

    if (typeof(FileReader) === 'function' && Modernizr.draganddrop) {
  //sexy drag and drop action
} else {
   //no drag and drop support available :(
};
    InformationsquelleAutor Steven Benjamin
  7. 1
    if (!window.File || !window.FileReader || !window.FileList || !window.Blob) {
  alert('The File APIs are not fully supported in this browser. Please upgrade your browser.');
}
    InformationsquelleAutor N A
  8. 0

    Son un peu plus compliqué. iOS7 rapports qu'il soutient à la fois FileReader et draganddrop photos à télécharger. Depuis que je suis à la recherche d'un plus générale de téléchargement de fichiers que je ne pouvais pas faire avec iOS, j'avais besoin d'une réponse.

    Modernizr numéro 57 à ici parle de la question. Maintenant avec windows 8 et deux contact et de la souris, ses délicates. Il y a un code dans le milieu par chriskeeble que j'ai utilisé avec succès. Il s'appuie sur Modernizr et agent de détection.

    InformationsquelleAutor Mark Kasson