SitePoint Sponsor

User Tag List

Results 1 to 1 of 1
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2009
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb 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)

    Code:
     <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)

    Code:
    <?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"]);
     	}
       }		
    ?>
    Javascript file(ajaxfileupload.js )
    ===================================
    Code:
    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;
        }
    })
    Style (ajaxfileupload.css)
    ===================================
    Code:
    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(anes.pa@gmail.com)
    Attached Images Attached Images
    Attached Files Attached Files


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •