Multiple File Upload with HTML and PHP

We might have been in situation where we need to upload multiple files from a form. If you are in same situation, then you are in right place for the solution. In this article, we are going to learn to upload multiple files with HTML and PHP.

HTML

Firstly, we need to create a HTML form with attribute enctype=’multiple/form-data’. In fact, the enctype attribute specifies how the form-data should be encoded when submitting it to the server. When we are using forms that have a file upload control, weneed to specify enctype as multiple/form-data.

<form action="" method="post" enctype="multipart/form-data">
  <div class="form-group">
    <label>Select Files: </label>
    <input type="file" name="fileUpload[]" multiple > 
  </div>
  <input type="submit" name="Submit" value="Upload" >
</form>

If you have a closer look at the above HTML, we have used multiple attribute for the file input which allows us to select multiple files while uploading. Also, name=”fileUpload[]” allows array of files to be submitted.

Full Source Code :

index.html

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<style>
  .input-wrapper{
    margin-top: 20px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #000;
  }
</style>

<h1 class="text-center" style="margin:20px 20px;">Multiple File Upload with HTML and PHP</h1>
<hr>
<div class="row">
  <div class="offset-md-4 col-md-5">
    <form action="upload.php" method="post" enctype="multipart/form-data">
      <div class="form-group input-container">
        <label>Select Files: </label>
        <input type="file" class="form-control" name="fileUpload[]" multiple > 
      </div>
      
      <input type="submit" class="btn btn-success float-right" name="Submit" value="Upload" >
    </form>
  </div>
</div>

upload.php

<?php
$target_dir = 'files/';
if( isset($_FILES['fileUpload']['name'])) {
      
  $total_files = count($_FILES['fileUpload']['name']);
  $uploaded_files = 0;
  
  for($key = 0; $key < $total_files; $key++) {
    
    if(isset($_FILES['fileUpload']['name'][$key]) && $_FILES['fileUpload']['size'][$key] > 0) {

      $ext = strtolower(pathinfo($_FILES["fileUpload"]["name"][$key], PATHINFO_EXTENSION));
      if(!in_array( $ext, array('jpg', 'jpeg', 'png', 'gif', 'bmp'))) {
        echo 'extenstion not allowed';
        exit;
      }

      $maxFileSize = 5 * 1024 * 1024;
      $errors = array();
      if($_FILES['fileUpload']['size'][$key] > $maxFileSize){
        echo 'File size is greater than allowed size';
        exit;
      }

      
      $original_filename = $_FILES['fileUpload']['name'][$key];
      $target = $target_dir . basename($original_filename);
      $tmp  = $_FILES['fileUpload']['tmp_name'][$key];
      if(move_uploaded_file($tmp, $target)){
        $uploaded_files++;
      }
    }
    
  }
  echo $uploaded_files.' Files Uploaded';
}