Drag and drop for multiple files, summarised from [this article at artisansweb](https://artisansweb.net/drag-and-drop-multiple-file-upload-using-javascript-and-php/).
Example Html. Note that you can instead `theDiv.addEventListener("drop",upload_file)` and similarly `theDiv.addEventListener("dragover",...)`
```html
```
Example Css. You can also dynamically adjust classes/styles so that e.g. a dashed surround appears when dragging over.
```css
#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
```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
$val) {
$filename = uniqid().'_'.$_FILES['file']['name'][$key];
move_uploaded_file($_FILES['file']['tmp_name'][$key], 'uploads/'.$filename);
}
echo "File(s) uploaded successfully.";
die;
```