Multiple File Upload Form

In this post I am going to show you how to create a form that allows uploading multiple files at once. There is nothing much complex about this. As you’ll see the trick is in how we configure the file upload field.

Here is the html with the 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, pay your attention to the code that defines the form. There are few things that you should take a note:

  • Form’s method is set to POST which is recommended.
  • enctype attribute value is set to ‘multipart/form-data’. This is essential for the form to be able to submit files over a POST request. Without that you won’t be able to upload files.
  • The attribute multiple=”multiple” allows file input field to accept multiple file selections at once.
  • File input field’s 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 ‘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 hint to the browser which file types are preferred when the user tries to select files with the file manager dialog.

Now copy and paste this code into a new php script and try selecting few files. You’ll see it shows only image files in a directory and you can select and open more than one file at once. When you are done, you’ll see how many files are selected by next to file field control.

Now go ahead and add below php block to the top of your script:

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

In that code block what we are doing is, checking to see if the form is submitted. If it has, we have used print_r() function to echo out the contents of $_FILES array. This way we can determine whether our form has actually submitted the files or not.

Comments

So empty here ... leave a comment!

Leave a Reply

Your email address will not be published. Required fields are marked *

Sidebar



Do NOT follow this link or you will be banned from the site!