web-dev-qa-db-fra.com

Comment utiliser l'événement drop de jQuery pour télécharger des fichiers glissés depuis le bureau?

Est-il possible d'utiliser l'événement drop de jQuery pour faire glisser des fichiers depuis le bureau?

Si oui, comment puis-je obtenir les données du fichier déposé?

javascriptjqueryhtml5drag-and-drop
63
Chin

C'est un peu désordonné (vous devez gérer au moins 3 événements) mais possible.

Tout d'abord, vous devez ajouter des gestionnaires d'événements pour dragover et dragenter et empêcher les actions par défaut pour ces événements comme celui-ci:

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

Il est en fait important d'appeler preventDefault sur ces événements, sinon, certains navigateurs peuvent ne jamais déclencher l'événement drop.

Ensuite, vous pouvez ajouter le gestionnaire de dépôt et accéder aux fichiers déposés avec e.originalEvent.dataTransfer.files:

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

Maintenant, vous pouvez faire glisser des fichiers depuis le bureau/Explorer/Finder dans la div et y accéder.

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

137
Alex