php - Enable drag and drop upload in div container -

i'm sure there couple of questions similar 1 out there had no idea search for.

what i'm looking way enable drag , drop div on website. when drop file page (i'm using chrome) displays file (a file:// url) not want. if there's way without using plugins i'd more happy. should support multiple files.

this div-css looks like:

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

and here're jquery binds drag:

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; }); 

appreciate comments , answers. thank you!

it looks dragover event must canceled drop event fire.
fix add this:

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

here's working example made following code: http://jsfiddle.net/hmf4t/
can see files in console output.