Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

PHP 7 Script to Upload Multiple Files & Images With Validation Using HTML5 Form in Browser

Posted on February 11, 2023

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

 

 

 

 

PHP
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

 

 

PHP
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.

 

 

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
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.

 

 

 

Recent Posts

  • Android Java Project to Merge Multiple PDF Documents From Gallery Using iTextPDF Library
  • Android Java Project to Detect System Hardware & System CPU Info & Display inside TextView Widget
  • Android Java Project to Integrate Google OAuth2 Login & Logout System & Save User Info in SharedPreferences
  • Android Java Project to Export Raw Text to PDF Document Using iTextPDF Library
  • Android Java Project to Export Images From Gallery to PDF Document Using iTextPDF Library
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme