Skip to main content

Multiple File Upload with Progress Bar using PHP & jQuery

Some days age I have created a post that deals with How we can upload file with progress bar using php and jQuery. Some of my readers asked me how we can upload multiple files with progress bar. In this post I am going to show you how we can upload multiple files with progress bar.

We can upload multiple files with progress bar exactly same way as I shown previous. But we need to do some modification with our file upload form and our php script to handle multiple files.


Live Demo Download Source

Step 1 - The HTML

At first we need to create a simple file upload form.

<!doctype html>
<html lang="en">
<head>

  <meta charset="utf-8" />
  <title>Multiple File Upload with progress bar</title>

  <!-- styles -->
  <link rel="stylesheet" type="text/css" href="css/pure-min.css">
  <link rel="stylesheet" type="text/css" href="css/style.css">

</head>
<body>
<div class="container">  

  <!-- status message will be appear here -->
  <div class="status"></div>
  
  <!-- multiple file upload form -->
  <form action="upload.php" method="post" enctype="multipart/form-data" class="pure-form">
    <input type="file" name="files[]" multiple="multiple" id="files">
    <input type="submit" value="Upload" class="pure-button pure-button-primary">
  </form>
  
  <!-- progress bar -->
  <div class="progress">
    <div class="bar"></div >
    <div class="percent">0%</div >
  </div>

</div>

  <!-- javascript dependencies -->
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/jquery.form.min.js"></script>
  
  <!-- main script -->
  <script type="text/javascript" src="js/script.js"></script>

</body>
</html>


Step 2 - jQuery

script.js file holds our JavaScript and jQuery codes. In this tutorial we are using jQuery.form plugin to submit our form through ajax request.

$(function() {
  /* variables */
  var status = $('.status');
  var percent = $('.percent');
  var bar = $('.bar');
  
  /* submit form with ajax request using jQuery.form plugin */
  $('form').ajaxForm({

    /* set data type json */
    dataType:'json',

    /* reset before submitting */
    beforeSend: function() {
      status.fadeOut();
      bar.width('0%');
      percent.html('0%');
    },

    /* progress bar call back*/
    uploadProgress: function(event, position, total, percentComplete) {
      var pVel = percentComplete + '%';
      bar.width(pVel);
      percent.html(pVel);
    },

    /* complete call back */
    complete: function(data) {
      status.html(data.responseJSON.count + ' Files uploaded!').fadeIn();
    }

  });
});


Step 3 - PHP

Our upload.php file will receive uploaded files and it will do some file validations like max uploaded size and valid extensions. If files are pass the validations it will move files to upload folder and echo out number of successfully uploaded files with JSON response. If files contains any error or fail validation it simple will be skipped.

$max_size = 1024*200;
$extensions = array('jpeg', 'jpg', 'png');
$dir = 'uploads/';
$count = 0;

if ($_SERVER['REQUEST_METHOD'] == 'POST' and isset($_FILES['files']))
{
  // loop all files
  foreach ( $_FILES['files']['name'] as $i => $name )
  {
    // if file not uploaded then skip it
    if ( !is_uploaded_file($_FILES['files']['tmp_name'][$i]) )
      continue;

      // skip large files
    if ( $_FILES['files']['size'][$i] >= $max_size )
      continue;

    // skip unprotected files
    if( !in_array(pathinfo($name, PATHINFO_EXTENSION), $extensions) )
      continue;

    // now we can move uploaded files
      if( move_uploaded_file($_FILES["files"]["tmp_name"][$i], $dir . $name) )
        $count++;
  }

  echo json_encode(array('count' => $count));

}
Note PHP's default max number of file upload is 20. That means you can not upload more than 20 files at once. If you want to allow more than 20 files you need to edit php.ini file and change max_file_uploads value.

Popular posts from this blog

Multiple File Upload with PHP

Sometimes we need to allow our users to upload multiple file upload. On my previous post I was shown the basic of simple file upload with PHP. Today I am going to show you how to allow users to upload multiple files. It is almost similar like simple file upload but we need to do some modification with html markup and php code . multiple attribute is needed to add on the html markup. Major web browsers like Firefox, Chrome, Safari and IE 9+ support this attribute. Now I am going to show you how to upload multiple file with PHP and basic HTML form.

File Upload with Progress Bar using jQuery and PHP

In this post you will learn how to create a AJAX file uploading system with progress bar using jQuery and PHP. For this purpose we will going to use jQuery Form Plugin . It is a easy to use and powerful jQuery AJAX form submitting plugin. It supports XMLHttpRequest Level 2 and iframe file transportation. That's why it will work for both old and new browsers.