Come utilizzare l'evento di rilascio di jQuery per caricare file trascinati dal desktop?

Question

È possibile utilizzare l'evento drop di jQuery per il trascinamento di file dal desktop?

In caso affermativo, come ottengo i dati del file rilasciato?

Answer 1

È un po 'disordinato (è necessario gestire almeno 3 eventi) ma possibile.

In primo luogo, è necessario aggiungere eventhandlers per dragover e dragenter e prevenire le azioni predefinite per questi eventi del genere:

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

Quindi è possibile aggiungere il drop-conduttore e accedere ai file rilasciati con 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); 
      } 
     } 
    } 
); 

Ora è possibile trascinare i file dal desktop/explorer/finder nel div e accedervi.

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