Cómo usar el evento de caída de jQuery para cargar archivos arrastrados desde el escritorio?

Question

¿Es posible utilizar el evento drop de jQuery para arrastrar archivos desde el escritorio?

En caso afirmativo, ¿cómo obtengo los datos del archivo eliminado?

Answer 1

Es un poco complicado (debe manejar al menos 3 eventos) pero es posible.

En primer lugar, es necesario agregar manejadores de sucesos para dragover y dragenter y prevenir las acciones predeterminadas para estos eventos por el estilo:

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

continuación, puede agregar el menú controlador y acceder a los archivos gotearon 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); 
      } 
     } 
    } 
); 

Ahora puede arrastrar archivos desde el escritorio/explorer/finder en el div y acceder a ellos.

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