Multiple File Uploads with HTML & PHP

In this post, I am going to show you guys how to create a form that allows uploading multiple files at once. This is a pretty basic extremely simple example intended to show you the basic idea behind implementing a file uploading solution.

To accomplish our purpose we are going to need two pieces of code. First, an HTML form that allows the user to select and submit his files. Second, a PHP script that can process the submitted form.

So, let’s get started…

Here is the basic HTML form:

<html>
<head>
<title>Multiple File Upload Form</title>
</head>
<body>
    <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" enctype="multipart/form-data">
        <input type="file" name="pfile[]" multiple="multiple" accept="image/*"><br>
        <button type="submit" name="psubmit">Post!</button>
    </form>
</body>
</html>

In the above markup, there are few things that you should pay your attention to:

  • Form’s method is set to POST which is recommended.
  • The action is set to PHP global variable $_SERVER['PHP_SELF']. This variable will be replaced by the script’s name when your page runs in the browser. For example, if your page name is ‘test.php’ then the action will look something like action="test.php" when you load the page in the browser. It’s PHP’s way to refer to a script by its name. What this means is that, when the form is submitted, it will be processed by itself. In other words, the submitted data will be processed by that script itself. You can always set the action to a different PHP script if you want to. Here, we have opted to take this route for simplicity’s sake as well as demonstrating to you how to keep both the display code and the processing code on the same page.
  • enctype attribute value is set to multipart/form-data. This is essential for the form to be able to submit files over an HTTP POST request. Without that, you won’t be able to upload files.
  • The attribute multiple=”multiple” allows the file input field to accept multiple file selections at once.
  • File input field name is set to an array called pfile[]. This way, the field will be able to hold information about multiple files you select.
  • Also, we have defined which file types are allowed to select by using the accept attribute. In this case, the field only accepts image file types. This however does not validates the file types. It can be used as a way to inform the browser which file types are preferred when the user tries to select files with the file manager dialog.

Next, lets turn to the PHP code that processes the user’s form submission:

<?php
if($_SERVER['REQUEST_METHOD'] == 'POST')
{
     echo '<pre>';
     print_r($_FILES);
     echo '</pre>';
}
?>

In the above block of code, first we are checking to see if the form is submitted. If it has, we have used print_r() function to echo out the contents of our $_FILES array. You don’t actually need to use print_r() on a production application. We are just doing it to demonstrate to you whether and how we’ve received and access the submitted data. In a real scenario you can use the information of your $_FILES array to validate, save and do any other processing on the submitted files. The $_FILES array is a special PHP variable that contains all the information of the files that were submitted in the last HTTP request to the server.

Here is the full script in action:

<?php
if($_SERVER['REQUEST_METHOD'] == 'POST')
{
     echo '<pre>';
     print_r($_FILES);
     echo '</pre>';
}
?>
<html>
<head>
<title>Multiple File Upload Form</title>
</head>
<body>
    <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" enctype="multipart/form-data">
        <input type="file" name="pfile[]" multiple="multiple" accept="image/*"><br>
        <button type="submit" name="psubmit">Post!</button>
    </form>
</body>
</html>

Create this script on your local development environment and try running it on the browser.

That’s all there. Hope you’ve enjoyed this simple tutorial! 👋👋👋

Was this helpful?
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0