simple multiple upload in php

Multiple upload files in php  is very simply. Read the following steps and you can learn some jquery options in the multiple upload.

Step 1:


<form id="filename" action="" method="post" enctype="multipart/form-data">

<p style="background:#3F3F3F;color:#FFF"><span id="spanButtonPlaceHolder"></span>&nbsp;
<span class="add_field"><img src="/images/plus.gif" /></span>
<span class="remove_field"><img src="/images/minus.gif" /></span>
<span style="font-weight:bold; color:#03DE3B; line-height:24px; margin-left:10px;"> (You can upload more than one track at a time.) </span>
<div class="input_holder">
<input class="upload_btn" type="file" name="uploaded_files[]" id="input_clone"/>
<input class="upload_btn" type="file" name="uploaded_files[]"/>
</div>
</p>
<div id="light" class="white_content2"><p>Please wait the tracks are uploading...</p><img class="uploadprocess" width="128" src="/images/uploading.gif"></div>
<div id="fade1" class="black_overlay"></div>
<div id="underlay"></div>
<input type="submit" name="upload" value="Upload" class="validate clsappSbut orngbtn">

<div class="btnclear">
<a class="bck_btn" href="http://backurl"><img src="/images/back.jpg"></a>
<a class="nxt_btn" href="http://nexturl">Next</a>
</div>

</form>

Step 2:
This script is very important for multiple upload.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
/*If you have any jquery conflicts , use above two lines instead of  $(function(){ */
//var jq=jQuery.noConflict();
//jq(function($){

$(function(){

/*If you click the plus button the clone is genrated*/

 $('.add_field').click(function(){
   var input = $('#input_clone');
   var clone = input.clone(true);
   clone.removeAttr ('id');
   clone.val('');
   clone.appendTo('.input_holder');
  });

/*If you click the minus button the clone is removed*/
  $('.remove_field').click(function(){
   if($('.input_holder input:last-child').attr('id') != 'input_clone'){
    $('.input_holder input:last-child').remove();
   }
  });

/*If you click next button wioth out any files it throws error.*/

 $(".nxt_btn").click(function(event){
var fcount = $("#uploadedFilesList").attr("rel");
fcount = parseInt(fcount);
var rurl= $(this).attr("href");

if(fcount==0)
{
alert('Please upload files.');
return false;
}else{
return true;
}
  });

/* upload sumbitting time */

  $("#filename").submit(function(){
   var cnt=0;
   var ecnt=0;
   var big_v=0;
   var fcount = $("#uploadedFilesList").attr("rel");
   fcount = parseInt(fcount);
/*To check each file like forloop in jquery*/
     $("input[name='uploaded_files[]']").each(function(i, file){
     var c_file = $(this);
     var fileName = c_file.val();  
     var flength = $("input[name='uploaded_files[]']").length;
     flength = parseInt(flength);
     var ext = fileName.substring(fileName.lastIndexOf('.') + 1);
     var ext=ext.toLowerCase();
     var id_v = $(this).attr("id");

      if(ext!="mp3" && ext.length>0)
      {    
        /*If the selected value is not .mp3 file , to empty the selected value*/
if ($.browser.msie) {
c_file.replaceWith(c_file.clone());
}else{
c_file.val("");
}
 cnt++;
      }
   
      if(ext=="mp3")
      {
          ecnt++;
       }
   
     });

 
   if(cnt>0)
   {
     alert("Please upload Mp3 files only");
     return false;
   }
 
   if(ecnt==0)
   {
    alert("Please upload Mp3 files");
    return false;
   }
 
    if(cnt==0 && ecnt>0 )
   {
       if(ecnt>0)
     {
/*This is for showing upload the progress gif image with lightbox effect.we not navigate any other page while the uploading is finish*/
$("#light").show();
$("#fade1").show();
return true;
     }
 
   }
     return false;
   });

});
</script>

Step 3:
Css content to displayed like the light-box and some effects.
<style type="text/css">
.input_holder input{
display:block;
}

.clsAppForm span img {
    vertical-align: middle;
}
.white_content2
{
display: none;
background-color: black;
border: 10px solid #272727;
height:auto;
left: 25%;
padding: 18px 9px;
position: fixed;
top: 25%;
width: 534px;
z-index: 1002;
}

.white_content2 .uploadprocess { width:128px; display:block; margin:0 auto;}
.white_content2 p{color:#FFFFFF; text-align:center; font-weight:bold; padding:0 0 10px;}

.black_overlay{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.upload_btn { background: #9B9B9B; border: 1px solid #9B9B9B; width:500px;}
.btnclear { clear:both; overflow:hidden;}
.bck_btn { float:left;}
.nxt_btn { float:left; width:69px; height:24px; background:url(/images/continue.jpg) no-repeat 0 0; text-align:center; line-height:24px; display:inline-block; margin:0 0 0 10px;}
input.orngbtn {background:#f8a513; border:none; font-weight:bold; padding:5px 10px;}
</style>

Step 4:
This is the final output in the post values.

if(isset($_FILES['uploaded_files']))
{
    if($_FILES['uploaded_files']!='')
{
//For each file get the $key so you can check them by their key value
foreach($_FILES['uploaded_files']['name'] as $key => $value)
{
//If the file was uploaded successful and there is no error
if(is_uploaded_file($_FILES['uploaded_files']['tmp_name'][$key]) && $_FILES['uploaded_files']['error'][$key] == 0)
{

//Create an unique name for the file using the current timestamp, an random number and the filename
$filename = $_FILES['uploaded_files']['name'][$key];
   $filename = time().$filename;
$uploadPath="uploadedpath/".$filename;
$fsize = $_FILES['uploaded_files']['size'][$key];
$fsize=($fsize)/1048576;
  $size = round($fsize);
if($size<30){
//Check if the file was moved
if(move_uploaded_file($_FILES['uploaded_files']['tmp_name'][$key], $uploadPath))
{
// echo 'The file ' . $_FILES['uploaded_files']['name'][$key].' was uploaded successful <br/>';
}
}

}
}

}
}

Finally you done the multiple upload with simple jquery learning. Implement the code and share your thoughts.Cheers friends!!!