title: Enable drag and drop upload in div container
body: <p>I'm sure there are a couple of questions similar to this one out there but I had no idea what to search for.</p>
  
  <p>What I'm looking for is a way to enable drag and drop into a div on my website. Currently when I drop a file into the page (I'm using Chrome) it displays the file (a file:// url) which is not what I want. If there's a way to do this without using any plugins I'd be more then happy. It should support multiple files.</p>
  
  <p>This is what my div-css looks like:</p>
  
  <pre><code>#dnd {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;  
  }
  </code></pre>
  
  <p>And here're my jQuery binds for the drag:</p>
  
  <pre><code>function processFileUpload(droppedFiles)
  {
      var uploadFormData = new FormData($("#dnd")[0]); 
      if(droppedFiles.length &gt; 0)
      {
          for(f = 0; f &lt; 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;
  });
  </code></pre>
  
  <p>Appreciate all comments and answers. Thank you!</p>