+https://davidwalsh.name/multiple-file-upload
The HTML
<!-- IMPORTANT: FORM's enctype must be "multipart/form-data" --> <form method="post" action="upload-page.php" enctype="multipart/form-data"> <input name="filesToUpload[]" id="filesToUpload" type="file" multiple="" /> </form>
Simply adding the multiple attribute allows for multiple files to be uploaded via one INPUT element. If you’re a stickler for validation, you’ll want to assign the multiple attribute a value of multiple.
Listing Multiple Files with JavaScript
//get the input and UL list var input = document.getElementById('filesToUpload'); var list = document.getElementById('fileList'); //empty list for now... while (list.hasChildNodes()) { list.removeChild(ul.firstChild); } //for every file... for (var x = 0; x < input.files.length; x++) { //add to list var li = document.createElement('li'); li.innerHTML = 'File ' + (x + 1) + ': ' + input.files[x].name; list.append(li); }
The input.files property provides an array of files for which you can check the length; if there’s a length, you can loop through each file and access the file paths and names.
Receiving and Handling Files with PHP
if(count($_FILES['uploads']['filesToUpload'])) { foreach ($_FILES['uploads']['filesToUpload'] as $file) { //do your upload stuff here echo $file; } }
PHP creates an array of the files uploaded with the given INPUT’s name. This variable will always be an array within PHP.