how to upload Mutiple files using Jquery upload plugin

hi Friends,
I need to Upload some files in a Listing , by clicking
corresponding Upload link, then a popup window will
come with Browse option as Shown in attachment File.
My actual need is upload files using that , but
I can upload only 1 file there , I need to upload 1 to
5 files at a time based on need . How it can implement.
I give my Working code here , in php Help me , if
you know any other method to do same that's idea also
acceptable.

Home Page (index.html)

 <link href="ajaxfileupload.css" type="text/css" rel="stylesheet">
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" 

src="ajaxfileupload.js"></script>
<script>

function ajaxFileUpload()
	{
		$("#loading")
		.ajaxStart(function(){
			$(this).show();
		})
		.ajaxComplete(function(){
			$(this).hide();
		});

		$.ajaxFileUpload
		(
			{
				url:'doajaxfileupload.php',
				secureuri:false,
				fileElementId:'fileToUpload',
				dataType: 'json',
				success: function (data, status)
				{
					/*if(typeof(data.error) != 

'undefined')
					{
						if(data.error != '')
						{
							

alert(data.error);
                            //toggle('wrapper');

						}else
						{
							

alert(data.msg);
                            //toggle('wrapper');
						}
					}*/
				},
				error: function (data, status, e)
				{
					//alert(e);
                   // toggle('wrapper');
				}
			}
		)
		
		return false;

	}



function displayBox(windowname,no)
{
// $("#wrapper").show();
blanket_size(windowname);
window_pos(windowname);
toggle(windowname);
if(no>1)
{
var current_no = parseInt(no-1);
//alert("current no is:"+current_no); 
//alert("need more field");
for(var j=1;j<no;j++)
{
 //document.getElementById('opt'+j).style.display = 'block';
  $("#opt"+j).show();
}
}	
}

function toggle(div_id) {
	//var el = document.getElementById(div_id);
	//var el = $("#div_id"); 
       // if ( el.style.display == 'none' ) {	el.style.display = 

'block';}
	//else {el.style.display = 'none';}
       $("#"+div_id).toggle();
          
}

function blanket_size(popUpDivVar) {
	/*if (typeof window.innerWidth != 'undefined') {
		viewportheight = window.innerHeight;
	} else {
		viewportheight = 

document.documentElement.clientHeight;
	}
	if ((viewportheight > document.body.parentNode.scrollHeight) 

&& (viewportheight > document.body.parentNode.clientHeight)) {
		blanket_height = viewportheight;
	} else {
		if (document.body.parentNode.clientHeight > 

document.body.parentNode.scrollHeight) {
			blanket_height = 

document.body.parentNode.clientHeight;
		} else {
			blanket_height = 

document.body.parentNode.scrollHeight;
		}
	}*/
	//var blanket = document.getElementById('wrapper');
	//blanket.style.height = blanket_height + 'px';
	//blanket.style.height = 325 + 'px';

        $("#wrapper")[0].style.height = 325 + 'px';   
      
       // var popUpDiv = document.getElementById(popUpDivVar);
	//popUpDiv_height=blanket_height/2-150;//150 is half popup's 

height
	//popUpDiv.style.top = popUpDiv_height + 'px';
        //popUpDiv.style.top = 45 + 'px';
         $("#"+popUpDivVar)[0].style.top = 45 + 'px';   
        

}
function window_pos(popUpDivVar) {
	/*if (typeof window.innerWidth != 'undefined') {
		viewportwidth = window.innerHeight;
	} else {
		viewportwidth = document.documentElement.clientHeight;
	}
	if ((viewportwidth > document.body.parentNode.scrollWidth) && 

(viewportwidth > document.body.parentNode.clientWidth)) {
		window_width = viewportwidth;
	} else {
		if (document.body.parentNode.clientWidth > 

document.body.parentNode.scrollWidth) {
			window_width = 

document.body.parentNode.clientWidth;
		} else {
			window_width = 

document.body.parentNode.scrollWidth;
		}
	}*/
	//var popUpDiv = document.getElementById(popUpDivVar);
	//window_width=window_width/2-150;//150 is half popup's width
        //window_width = 45; 
	//popUpDiv.style.left = window_width + 'px';
        $("#"+popUpDivVar)[0].style.left = 45 + 'px';   

}




</script>

<style> 
#wrapper {
background-color:#111;
opacity: 0.65;
filter:alpha(opacity=65);
position:absolute;
z-index: 9001;
top:0px;
left:0px;
width:50%;
}
</style>

<body > <a href="javascript:displayBox('wrapper',4);">  Upload Source 

</a> </body>

<div id="wrapper" style="display:none;">
  <div id="close"><a href="javascript:toggle('wrapper');" 

title="close" ><img src="close.jpg" border="0"></a></div>
    <div id="content">
    	<h1>Ajax File Upload Demo</h1>
    	  	
		<img id="loading" src="loading.gif" 

style="display:none;">
		<form name="form" action="" method="POST" 

enctype="multipart/form-data">
		<table cellpadding="0" cellspacing="0" 

class="tableForm">

		<thead>
			<tr>
				<th>Please select a file and click 

Upload button</th>
			</tr>
		</thead>
		<tbody>	
			
                         <tr>
			<td height=35><input id="fileToUpload0" 

type="file" size="45" name="fileToUpload0" class="input"></td>
                        </tr>
                        
                      <tr id="opt1" style="display:none;">
			<td height=35><input id="fileToUpload1" 

type="file" size="45" name="fileToUpload1" class="input"></td>
                        </tr>                
                      <tr id="opt2" style="display:none;">
			<td height=35><input id="fileToUpload2" 

type="file" size="45" name="fileToUpload2" class="input"></td>
                        </tr> 
                      <tr id="opt3" style="display:none;">
			<td height=35><input id="fileToUpload3" 

type="file" size="45" name="fileToUpload3" class="input"></td>
                        </tr>  
                      <tr id="opt4" style="display:none;">
			<td height=35><input id="fileToUpload4" 

type="file" size="45" name="fileToUpload4" class="input"></td>
                        </tr>  
          

		</tbody>
			<tfoot>
				<tr>
					<td><button class="button" 

id="buttonUpload" onclick="return 

ajaxFileUpload();">Upload</button></td>
				</tr>
			</tfoot>
	
	</table>
		</form>    	
    </div>
    

Code (markup):

Server file - php (doajaxfileupload.php)

<?php
	$error = "";
	$msg = "";
	$fileElementName = "fileToUpload";
     
        for($j=0;$j<5;$j++)
        {  
		//echo "Hi";
		//echo "name is 

:".$_FILES["fileToUpload1"]["name"]."<br />";
	//if(!empty($_FILES[$fileElementName.$j]['error']))
     if($_FILES["fileToUpload".$j]['error']>0)
	{
	$error = "Some error in file upload";
	 }
    else 
	{
		

move_uploaded_file($_FILES["fileToUpload".$j]["tmp_name"],"images/".$_

FILES["fileToUpload".$j]["name"]);
 	}
   }		
?>

Code (markup):

Javascript file(ajaxfileupload.js )
===================================

jQuery.extend({
	

    createUploadIframe: function(id, uri)
	{
			//create frame
            var frameId = 'jUploadFrame' + id;
            
            if(window.ActiveXObject) {
                var io = document.createElement('<iframe id="' + 

frameId + '" name="' + frameId + '" />');
                if(typeof uri== 'boolean'){
                    io.src = 'javascript:false';
                }
                else if(typeof uri== 'string'){
                    io.src = uri;
                }
            }
            else {
                var io = document.createElement('iframe');
                io.id = frameId;
                io.name = frameId;
            }
            io.style.position = 'absolute';
            io.style.top = '-1000px';
            io.style.left = '-1000px';

            document.body.appendChild(io);

            return io			
    },
    createUploadForm: function(id, fileElementId)
	{
		//create form	
		var formId = 'jUploadForm' + id;
		var fileId = 'jUploadFile' + id;
		var form = $('<form  action="" method="POST" name="' + 

formId + '" id="' + formId + '" 

enctype="multipart/form-data"></form>');	
		var oldElement = $('#' + fileElementId);
		var newElement = $(oldElement).clone();
		$(oldElement).attr('id', fileId);
		$(oldElement).before(newElement);
		$(oldElement).appendTo(form);
		//set attributes
		$(form).css('position', 'absolute');
		$(form).css('top', '-1200px');
		$(form).css('left', '-1200px');
		$(form).appendTo('body');		
		return form;
    },

    ajaxFileUpload: function(s) {
        // TODO introduce global settings, allowing the client to 

modify them for all requests, not only timeout		
        s = jQuery.extend({}, jQuery.ajaxSettings, s);
        var id = new Date().getTime()        
		var form = jQuery.createUploadForm(id, 

s.fileElementId);
		var io = jQuery.createUploadIframe(id, s.secureuri);
		var frameId = 'jUploadFrame' + id;
		var formId = 'jUploadForm' + id;		
        // Watch for a new set of requests
        if ( s.global && ! jQuery.active++ )
		{
			jQuery.event.trigger( "ajaxStart" );
		}            
        var requestDone = false;
        // Create the request object
        var xml = {}   
        if ( s.global )
            jQuery.event.trigger("ajaxSend", [xml, s]);
        // Wait for a response to come back
        var uploadCallback = function(isTimeout)
		{			
			var io = document.getElementById(frameId);
            try 
			{				
				if(io.contentWindow)
				{
					 xml.responseText = 

io.contentWindow.document.body?io.contentWindow.document.body.innerHTM

L:null;
                	 xml.responseXML = 

io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDoc

ument:io.contentWindow.document;
					 
				}else if(io.contentDocument)
				{
					 xml.responseText = 

io.contentDocument.document.body?io.contentDocument.document.body.inne

rHTML:null;
                	xml.responseXML = 

io.contentDocument.document.XMLDocument?io.contentDocument.document.XM

LDocument:io.contentDocument.document;
				}					

	
            }catch(e)
			{
				jQuery.handleError(s, xml, null, e);
			}
            if ( xml || isTimeout == "timeout") 
			{				
                requestDone = true;
                var status;
                try {
                    status = isTimeout != "timeout" ? "success" : 

"error";
                    // Make sure that the request was successful or 

notmodified
                    if ( status != "error" )
					{
                        // process the data (runs the xml through 

httpData regardless of callback)
                        var data = jQuery.uploadHttpData( xml, 

s.dataType );    
                        // If a local callback was specified, fire it 

and pass it the data
                        if ( s.success )
                            s.success( data, status );
    
                        // Fire the global callback
                        if( s.global )
                            jQuery.event.trigger( "ajaxSuccess", [xml, 

s] );
                    } else
                        jQuery.handleError(s, xml, status);
                } catch(e) 
				{
                    status = "error";
                    jQuery.handleError(s, xml, status, e);
                }

                // The request was completed
                if( s.global )
                    jQuery.event.trigger( "ajaxComplete", [xml, s] );

                // Handle the global AJAX counter
                if ( s.global && ! --jQuery.active )
                    jQuery.event.trigger( "ajaxStop" );

                // Process result
                if ( s.complete )
                    s.complete(xml, status);

                jQuery(io).unbind()

                setTimeout(function()
									

{	try 
									

	{
									

		$(io).remove();
									

		$(form).remove();	
									

		
									

	} catch(e) 
									

	{
									

		jQuery.handleError(s, xml, null, e);
									

	}								

	

									

}, 100)

                xml = null

            }
        }
        // Timeout checker
        if ( s.timeout > 0 ) 
		{
            setTimeout(function(){
                // Check to see if the request is still happening
                if( !requestDone ) uploadCallback( "timeout" );
            }, s.timeout);
        }
        try 
		{
           // var io = $('#' + frameId);
			var form = $('#' + formId);
			$(form).attr('action', s.url);
			$(form).attr('method', 'POST');
			$(form).attr('target', frameId);
            if(form.encoding)
			{
                form.encoding = 'multipart/form-data';			

	
            }
            else
			{				
                form.enctype = 'multipart/form-data';
            }			
            $(form).submit();

        } catch(e) 
		{			
            jQuery.handleError(s, xml, null, e);
        }
        if(window.attachEvent){
            document.getElementById(frameId).attachEvent('onload', 

uploadCallback);
        }
        else{
            document.getElementById(frameId).addEventListener('load', 

uploadCallback, false);
        } 		
        return {abort: function () {}};	

    },

    uploadHttpData: function( r, type ) {
        var data = !type;
        data = type == "xml" || data ? r.responseXML : r.responseText;
        // If the type is "script", eval it in global context
        if ( type == "script" )
            jQuery.globalEval( data );
        // Get the JavaScript object, if JSON is used.
        if ( type == "json" )
            eval( "data = " + data );
        // evaluate scripts within html
        if ( type == "html" )
            jQuery("<div>").html(data).evalScripts();
			//alert($('param', 

data).each(function(){alert($(this).attr('value'));}));
        return data;
    }
})

Code (markup):

Style (ajaxfileupload.css)
===================================

html, body
{
    margin: 0;
    padding: 0;
}
body
{
    font: 12px/1.3em Arial, Helvetica, sans-serif;
    color: #000;
    background-color: #fff;
}
h1, h2, h3, h4, h5
{
    margin: 0 0 1em;
    color: #F2683E;
}
h1
{
    font-size: 18px;
    font-weight: normal;
}
p{margin: 0 0 1em;}
a,
a:link,
a:visited{color: #F2683E;}
a:hover,
a:active{}
a img{border: none;}
form{margin: 0;}
fieldset{padding: 0;}
hr
{
    height: 1px;
    border: none;
    color: #999;
    background-color: #999;
}

/* ~~~ === POSITIONG SELECTORS ======================================= 

~~~ */
#wrapper
{
    position: relative;
    width: 773px;
    height: 474px;
    background: url(../images/kiwisaver/body_bg.gif) no-repeat  0 0;
}

#content
{
    float: left;
    display: inline;
    width: 541px;
    height: 341px;
    margin: 30px 0 0 8px;
    padding: 22px;
}

Code (markup):

View attachment WorkingCopy.zip View attachment WorkingCopy.zip I attach the image and Working copy as zip, please take
it and you can work , Help me with your idea.

Regards Anes(anes.pa@gmail.com)