lang/js/ DragAndDropFiles


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

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;