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

Drop file(s) here

or

``` 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; ```