How to upload Mutiple files with jquery file upload plugin

[amskape]

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>
 
 

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"],"http://bytes.com/images/".$_FILES["fileToUpload".$j]["name"]);
     }
   }        
?>
 

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.innerHTML:null;
                     xml.responseXML = io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document;
 
                }else if(io.contentDocument)
                {
                     xml.responseText = io.contentDocument.document.body?io.contentDocument.document.body.innerHTML:null;
                    xml.responseXML = io.contentDocument.document.XMLDocument?io.contentDocument.document.XMLDocument: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;
    }
})
 
 

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;
}

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

Regards Anes(<Email removed>)