Welcome folks today in this blog post we will be uploading multiple files and images with validation using html5 form in browser using php. All the full source code of the application is shown below.
Get Started
In order to get started you need to make an index.php file and copy paste the following code
index.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!DOCTYPE html> <html> <head> <title> Select and upload multiple files to the server </title> </head> <body> <!-- multipart/form-data ensures that form data is going to be encoded as MIME data --> <form action="" method="POST" enctype="multipart/form-data"> <h2>Upload Files</h2> <p> Select files to upload: <!-- name of the input fields are going to be used in our php script--> <input type="file" name="files[]" multiple> <br><br> <input type="submit" name="submit" value="Upload" > </p> </form> </body> </html> |
As you can see in the above html5 form we have the input field where we allow the user to select multiple image files. We have given the attribute of multiple to allow user to select multiple files. And then we have the submit button to submit the form.
Now we will be submitting the html5 form to the same page. Now we need to write the below php code for uploading multiple files inside the uploads folder. Now we need to make the uploads folder inside the root directory where we will be storing all the uploaded files
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?php // Check if form was submitted if(isset($_POST['submit'])) { // Configure upload directory and allowed file types $upload_dir = 'uploads'.DIRECTORY_SEPARATOR; $allowed_types = array('jpg', 'png', 'jpeg', 'gif'); // Define maxsize for files i.e 2MB $maxsize = 2 * 1024 * 1024; } ?> |
As you can see we are using the isset() method to check if the submit button is clicked by the user or not. And then we are declaring the uploads directory path. And then we are declaring the array of allowed extensions of files which can be uploaded. As the files should only be images that include jpg,png and gif. And the maxsize that we allow for each file is 2MB
|
1 2 3 4 5 6 7 8 9 |
// Checks if user sent an empty form if(!empty(array_filter($_FILES['files']['name']))) { } else { // If no files selected echo "No files selected."; } |
As you can see we are checking in the if condition that if any file is selected by the user or not using the empty() function and inside it we are getting the name of the file using the $_FILES[] array.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
<?php // Check if form was submitted if(isset($_POST['submit'])) { // Configure upload directory and allowed file types $upload_dir = 'uploads'.DIRECTORY_SEPARATOR; $allowed_types = array('jpg', 'png', 'jpeg', 'gif'); // Define maxsize for files i.e 2MB $maxsize = 2 * 1024 * 1024; // Checks if user sent an empty form if(!empty(array_filter($_FILES['files']['name']))) { // Loop through each file in files[] array foreach ($_FILES['files']['tmp_name'] as $key => $value) { $file_tmpname = $_FILES['files']['tmp_name'][$key]; $file_name = $_FILES['files']['name'][$key]; $file_size = $_FILES['files']['size'][$key]; $file_ext = pathinfo($file_name, PATHINFO_EXTENSION); // Set upload file path $filepath = $upload_dir.$file_name; // Check file type is allowed or not if(in_array(strtolower($file_ext), $allowed_types)) { // Verify file size - 2MB max if ($file_size > $maxsize) echo "Error: File size is larger than the allowed limit."; // If file with name already exist then append time in // front of name of the file to avoid overwriting of file if(file_exists($filepath)) { $filepath = $upload_dir.time().$file_name; if( move_uploaded_file($file_tmpname, $filepath)) { echo "{$file_name} successfully uploaded <br />"; } else { echo "Error uploading {$file_name} <br />"; } } else { if( move_uploaded_file($file_tmpname, $filepath)) { echo "{$file_name} successfully uploaded <br />"; } else { echo "Error uploading {$file_name} <br />"; } } } else { // If file extension not valid echo "Error uploading {$file_name} "; echo "({$file_ext} file type is not allowed)<br / >"; } } } else { // If no files selected echo "No files selected."; } } ?> |
As you can see we are using the foreach loop to iterate over all the selected files and then we are getting the temporary path of the file. And then we are using the move_uploaded_file() method to move the file to the uploads directory. And also at the same time we are checking all the file validations such as the size and type of the file uploaded by the user. Now if you execute the php code inside the browser you will see the below images uploaded inside the uploads folder.
