Masaüstünden sürüklenen dosyaları yüklemek için jQuery's drop olayı nasıl kullanılır?

Question

Dosyaları masaüstünden sürüklemek için jQuery'nin drop olayını kullanmak mümkün mü?

Öyleyse, bırakılan dosya verilerini nasıl alabilirim?

Answer 1

Bu biraz dağınık (en az 3 olayın üstesinden gelmeniz gerekiyor) ancak mümkün.

İlk olarak, böyle bu olaylar için varsayılan eylemleri dragover ve dragenter için eventhandlers ekleyip önlemek gerekir:

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

Sonra e.originalEvent.dataTransfer.files ile düştü dosyaları açılan işleyici ekleyin ve erişebilir:

$('#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); 
      } 
     } 
    } 
); 

Artık dosyaları div içindeki masaüstü/gezgin/bulucudan sürükleyip bunlara erişebilirsiniz.

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