dd_upload.js

var dd_upload_init = (function(id) {

  var is_ff = navigator.userAgent.indexOf("Firefox")!=-1;
  var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
  
  if (!is_ff && !is_chrome) {
    return;
  }
  
  //handy functions
  var $ = function(id) {return document.getElementById(id)};
  var e = function(html) {
    var s = document.createElement('span');
    s.innerHTML = html;
    return s.removeChild(s.children[0]);
  }

  
  var body = document.body;
  var drop_files_here = $(id);
  
  
  var input = e(
    '<input id="dd_upload_input" name="dd_files" type="file" multiple="true" '+
    'style="position:absolute;top:0;left:0;display:block;opacity:0;width:100%;height:100%;" />'
  );  
  drop_files_here.appendChild(input);
  dd_upload_input = $('dd_upload_input');
  

  if (is_chrome) {
    var entered = 0;

    var dragEnter = function(node) {
      return function(e) {
        if (node == document.body) entered++; //fix for chrome
        node.className = 'file_over';
      }
      e.stopPropagation();
    }

    var dragLeave = function(node) {
      return function(e) {
        if (e.target != node) {
          node.className = '';
        }
      }
    }

    var dragLeaveBody = function(e) {
      entered--; //fix for chrome
      if (entered <= 0) {
        entered = 0;
        document.body.className = '';
      }
    }

    drop_files_here.addEventListener("dragenter", dragEnter(drop_files_here), false);
    drop_files_here.addEventListener("dragexit", dragLeave(drop_files_here), false);
    drop_files_here.addEventListener("dragleave", dragLeave(drop_files_here), false);

    body.addEventListener("dragenter", dragEnter(body), false);
    document.addEventListener("dragleave", dragLeaveBody, false);


    input.addEventListener('change', function(e) {
        body.className = '';
        drop_files_here.className = '';
        input.form.submit();
      });

  } else /*FIREFOX*/ {

    var dropbox;

    function init() {
      window.addEventListener("dragenter", dragenter, true);
      window.addEventListener("dragleave", dragleave, true);
      drop_files_here.addEventListener("dragover", dragover, true);
      drop_files_here.addEventListener("drop", drop, true);
    }

    function dragenter(e) {
      document.body.className = 'file_over';
    }

    function dragleave(e) {
      dropbox.removeAttribute("dragenter");
      document.body.className = '';
    }

    function dragover(e) {
      e.preventDefault();
    }

    function drop(event) {

      var data = event.dataTransfer;

      var boundary = '------multipartformboundary' + (new Date).getTime();
      var dashdash = '--';
      var crlf     = '\r\n';

      /* Build RFC2388 string. */
      var builder = '';

      builder += dashdash;
      builder += boundary;
      builder += crlf;

      var xhr = new XMLHttpRequest();

      /* For each dropped file. */
      for (var i = 0; i < data.files.length; i++) {
          var file = data.files[i];

          /* Write boundary. */
          builder += dashdash;
          builder += boundary;
          builder += crlf;

          /* Generate headers. */
          builder += 'Content-Disposition: form-data; name="dd_files[]"';
          if (file.fileName) {
            builder += '; filename="' + file.fileName + '"';
          }
          builder += crlf;

          builder += 'Content-Type: application/octet-stream';
          builder += crlf;
          builder += crlf;

          /* Append binary data. */
          builder += file.getAsBinary();
          builder += crlf;
      }

      /* Mark end of the request.  */
      builder += dashdash;
      builder += boundary;
      builder += dashdash;
      builder += crlf;

      xhr.open("POST", input.form.action, true);
      xhr.setRequestHeader('content-type',
            'multipart/form-data; boundary=' + boundary);
      xhr.sendAsBinary(builder);

      xhr.onload = function(event) {
          if (xhr.responseText) {
            dd_upload_done();
          }
      };

      /* Prevent FireFox opening the dragged file. */
      event.stopPropagation();
   }
   window.addEventListener("load", init, true);
  }

  window.dd_upload_done = function() {
    window.location = window.location.href;
  }



});

gistfile3.txt

upload.html

<!DOCTYPE html>
<head>
  <meta charset="UTF-8" /> 
  <script src="dd_upload.js" type="text/javascript"></script> 
<style>
#drop_files_here {
  opacity:0;
  -webkit-transition:opacity 0.5s ease-out;
  display:block !important;
  position:absolute;
  top:30%;
  left:20%;
  background:#2a2;
  border-radius:15px;
  height:200px;
  width:60%;
  z-index:-20;
}
.file_over #drop_files_here {
  opacity:1;
  z-index:20000;
}

#drop_files_here .drop_label {
  display:block;
  text-align: center;
  font-size:3em;
  padding-top: 1.4em;
  margin-left:auto;
  margin-right:auto;
  color:#afa;
  font-weight:bold;
  -webkit-text-stroke:1px rgba(0,0,0, 0.125);
  text-shadow: rgba(0,0,0, 0.125) -1px -1px 0;
}
</style>
</head>
<body>

<!-- file upload form -->
<form enctype="multipart/form-data" method="POST" action="upload_target.php" target="upload_iframe">

  <!--
       this div is used to drop files into, 
       it must be inside the uploading form
   -->
  <div id="drop_files_here" >
      <span class="drop_label" >Drop files here</span>
  </div>
</form>

<!-- the file upload iframe -->
<iframe style="display:none" name="upload_iframe"></iframe>


<!-- initialize the script -->
<script>dd_upload_init('drop_files_here')</script>

</body>
</html>