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.