utiliser jquery .on pour supprimer des événements lors du téléchargement de fichiers à partir du bureau?

Question

Est-il possible d'utiliser l'événement jquery .on ("drop") pour faire glisser des fichiers depuis le bureau?. Si oui, comment puis-je obtenir les informations sur le fichier supprimé?

Toute aide très appréciée.

Answer 1

Il n'est pas facile, mais possible.

Tout d'abord, vous devez ajouter des gestionnaires d'événements pour dragover et dragenter et de prévenir les actions par défaut pour ces événements comme ça:

$('#div').on(
    'dragover',
    function(e) {
        e.preventDefault();
        e.stopPropagation();
    }
)
$('#div').on(
    'dragenter',
    function(e) {
        e.preventDefault();
        e.stopPropagation();
    }
)

Ensuite, vous pouvez ajouter la baisse de gestionnaire et d'accéder aux fichiers déposés avec e.originalEvent.dataTransfer.files:

$('#div').on(
    'drop',
    function(e){
        if(e.originalEvent.dataTransfer){
            if(e.originalEvent.dataTransfer.files.length) {
                e.preventDefault();
                e.stopPropagation();
                /*UPLOAD FILES HERE*/
                upload(e.originalEvent.dataTransfer.files);
            }   
        }
    }
);

Vous êtes maintenant en mesure de faire glisser des fichiers depuis le bureau/explorer/finder dans le div et d'y accéder.

http://jsfiddle.net/fSA4N/5/