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>
<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!!!
