Включить перетаскивание в контейнер div

Question

Я уверен, что есть несколько вопросов, подобных этому, но я понятия не имел, что искать.

Что я ищу, это способ включить перетаскивание в div на моем сайте. В настоящее время, когда я бросаю файл на страницу (я использую Chrome), он отображает файл (файл: // url), который я не хочу. Если есть способ сделать это, не используя никаких плагинов, я был бы более счастлив. Он должен поддерживать несколько файлов.

Это то, что мой Div-CSS выглядит следующим образом:

#dnd { 
    position: absolute; 
    top: 0; 
    right: 0; 
    left: 0; 
    bottom: 0; 
} 

И here're мой JQuery связывает для сопротивления:

function processFileUpload(droppedFiles) 
{ 
    var uploadFormData = new FormData($("#dnd")[0]); 
    if(droppedFiles.length > 0) 
    { 
     for(f = 0; f < droppedFiles.length; f++) 
     { 
      uploadFormData.append("upload[]",droppedFiles[f]); 
     } 
    } 

    $.ajax({ 
     url : "index.php", 
     type : "POST", 
     data : uploadFormData, 
     cache : false, 
     contentType : false, 
     processData : false 
    }); 
} 

$("#dnd").bind("dragenter", function() { 
    $(this).css("background", "#8c8c8c"); 
    return false; 
}); 

$("#dnd").bind("dragleave", function() { 
    $(this).css("background", "#c9c9c9"); 
    return false; 
}); 

$("#dnd").bind("drop", function(e) { 
    files = e.dataTransfer.files; 
    processFileUpload(files); 
    return false; 
}); 

Цените все комментарии и ответы. Спасибо!

Answer 1

Похоже, что dragover событие должно быть отменено для drop событие для стрельбы.
Чтобы исправить это просто добавить следующее:

$("#dnd").bind('dragover', function() { 
    return false; 
}); 

Вот рабочий пример, я сделал следующий код: http://jsfiddle.net/hmf4T/
Вы можете увидеть файлы в консоли вывода.