lang/js/ DragAndDropFiles

Drag and drop for multiple files, summarised from this article at artisansweb.

Example Html. Note that you can instead theDiv.addEventListener("drop",upload_file) and similarly theDiv.addEventListener("dragover",...)

<div id="drop_file_zone" ondrop="upload_file(event)" ondragover="return false">
  <div id="drag_upload_file">
    <p>Drop file(s) here</p>
    <p>or</p>
    <p><input type="button" value="Select File(s)" onclick="file_explorer();" /></p>
    <input type="file" id="selectfile" multiple />
  </div>
</div>

Example Css. You can also dynamically adjust classes/styles so that e.g. a dashed surround appears when dragging over.

#drop_file_zone {
    background-color: #EEE;
    border: #999 5px dashed;
    width: 290px;
    height: 200px;
    padding: 8px;
    font-size: 18px;
}
#drag_upload_file {
  width:50%;
  margin:0 auto;
}
#drag_upload_file p {
  text-align: center;
}
#drag_upload_file #selectfile {
  display: none;
}

Javascript

function upload_file(e) {
  e.preventDefault();
  ajax_file_upload(e.dataTransfer.files);
}

function file_explorer() {
  document.getElementById('selectfile').click();
  document.getElementById('selectfile').onchange = function () {
    files = document.getElementById('selectfile').files;
    ajax_file_upload(files);
  };
}

function ajax_file_upload(files_obj) {
  if (files_obj != undefined) {
    var form_data = new FormData();
    for (i = 0; i < files_obj.length; i++) {
      form_data.append('file[]', files_obj[i]);
    }
    var xhttp = new XMLHttpRequest();
    xhttp.open("POST", "ajax.php", true);
    xhttp.onload = function (event) {
      if (xhttp.status == 200) {
        alert(this.responseText);
      } else {
        alert("Error " + xhttp.status + " occurred when trying to upload your file.");
      }
    }

    xhttp.send(form_data);
  }
}

Php

<?php
if (!file_exists('uploads')) {
    mkdir('uploads', 0777);
}

foreach ($_FILES['file']['name'] as $key=>$val) {
    $filename = uniqid().'_'.$_FILES['file']['name'][$key];

    move_uploaded_file($_FILES['file']['tmp_name'][$key], 'uploads/'.$filename);
}

echo "File(s) uploaded successfully.";
die;