In this post we are discussing about Multiple file uploader using php html and jQuery. we can upload multiple files by just using php, html and jQuery.

First, let’s create the html form and add two “buttons” that will be used for adding or removing an uploading field from the form.

<span class="add_field">+</span>
<span class="remove_field">-</span>
 
<form action="upload.php" method="POST" enctype="multipart/form-data">
    <div class="input_holder">
        <input type="file" name="uploaded_files[]" id="input_clone"/>
    </div>
    <input type="submit" value="upload_files" />
</form>

The span elements will be out add/remove buttons so we’ll add a listener to them to know when someone want to add or remove a field from the form.

And add the jQuery as shown below

<script type="text/javascript">
 $(function(){
        $('.add_field').click(function(){
     
            var input = $('#input_clone');
            var clone = input.clone(true);
            clone.removeAttr ('id');
            clone.val('');
            clone.appendTo('.input_holder'); 
         
        });
 
        $('.remove_field').click(function(){
         
            if($('.input_holder input:last-child').attr('id') != 'input_clone'){
                  $('.input_holder input:last-child').remove();
            }
         
        });
})
 
</script>

And have to handle the files uploaded using php

<?php
if(isset($_FILES ['uploaded_files']))
{
     foreach($_FILES['uploaded_files']['name'] as $key=>$value)
     {
          if(is_uploaded_file($_FILES['uploaded_files']['tmp_name'][$key]) && $_FILES[['uploaded_files']['error'][$key] == 0)
          {
                $filename = $_FILES['uploaded_files']['name'][$key];
                $filename = time().rand(0,999).$filename;
                             
                if(move_uploaded_file($_FILES['uploaded_files']['tmp_name'][$key], 'uploads/'. $filename))
                {
                      echo 'The file '. $_FILES['uploaded_files']['name'][$key].' was uploaded successful';
                }
                else
                {
                      echo 'There was a problem uploading the picture.';
                } 
          }
          else
          {
            echo 'There is a problem with the uploading system.';
          }
     }
}
?>

So that’s it we are just created a Multiple file uploader using php html and jQuery