By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
432,175 Members | 1,767 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 432,175 IT Pros & Developers. It's quick & easy.

How to upload Mutiple files with jquery file upload plugin

P: 55
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)

Expand|Select|Wrap|Line Numbers
  1.  <link href="ajaxfileupload.css" type="text/css" rel="stylesheet">
  2.     <script type="text/javascript" src="jquery.js"></script>
  3.     <script type="text/javascript" src="ajaxfileupload.js"></script>
  4. <script>
  5.  
  6. function ajaxFileUpload()
  7.     {
  8.         $("#loading")
  9.         .ajaxStart(function(){
  10.             $(this).show();
  11.         })
  12.         .ajaxComplete(function(){
  13.             $(this).hide();
  14.         });
  15.  
  16.         $.ajaxFileUpload
  17.         (
  18.             {
  19.                 url:'doajaxfileupload.php',
  20.                 secureuri:false,
  21.                 fileElementId:'fileToUpload',
  22.                 dataType: 'json',
  23.                 success: function (data, status)
  24.                 {
  25.                     /*if(typeof(data.error) != 'undefined')
  26.                     {
  27.                         if(data.error != '')
  28.                         {
  29.                             alert(data.error);
  30.                             //toggle('wrapper');
  31.  
  32.                         }else
  33.                         {
  34.                             alert(data.msg);
  35.                             //toggle('wrapper');
  36.                         }
  37.                     }*/
  38.                 },
  39.                 error: function (data, status, e)
  40.                 {
  41.                     //alert(e);
  42.                    // toggle('wrapper');
  43.                 }
  44.             }
  45.         )
  46.  
  47.         return false;
  48.  
  49.     }
  50.  
  51.  
  52.  
  53. function displayBox(windowname,no)
  54. {
  55. // $("#wrapper").show();
  56. blanket_size(windowname);
  57. window_pos(windowname);
  58. toggle(windowname);
  59. if(no>1)
  60. {
  61. var current_no = parseInt(no-1);
  62. //alert("current no is:"+current_no); 
  63. //alert("need more field");
  64. for(var j=1;j<no;j++)
  65. {
  66.  //document.getElementById('opt'+j).style.display = 'block';
  67.   $("#opt"+j).show();
  68. }
  69. }    
  70. }
  71.  
  72. function toggle(div_id) {
  73.     //var el = document.getElementById(div_id);
  74.     //var el = $("#div_id"); 
  75.        // if ( el.style.display == 'none' ) {    el.style.display = 'block';}
  76.     //else {el.style.display = 'none';}
  77.        $("#"+div_id).toggle();
  78.  
  79. }
  80.  
  81. function blanket_size(popUpDivVar) {
  82.     /*if (typeof window.innerWidth != 'undefined') {
  83.         viewportheight = window.innerHeight;
  84.     } else {
  85.         viewportheight = document.documentElement.clientHeight;
  86.     }
  87.     if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
  88.         blanket_height = viewportheight;
  89.     } else {
  90.         if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
  91.             blanket_height = document.body.parentNode.clientHeight;
  92.         } else {
  93.             blanket_height = document.body.parentNode.scrollHeight;
  94.         }
  95.     }*/
  96.     //var blanket = document.getElementById('wrapper');
  97.     //blanket.style.height = blanket_height + 'px';
  98.     //blanket.style.height = 325 + 'px';
  99.  
  100.         $("#wrapper")[0].style.height = 325 + 'px';   
  101.  
  102.        // var popUpDiv = document.getElementById(popUpDivVar);
  103.     //popUpDiv_height=blanket_height/2-150;//150 is half popup's height
  104.     //popUpDiv.style.top = popUpDiv_height + 'px';
  105.         //popUpDiv.style.top = 45 + 'px';
  106.          $("#"+popUpDivVar)[0].style.top = 45 + 'px';   
  107.  
  108.  
  109. }
  110. function window_pos(popUpDivVar) {
  111.     /*if (typeof window.innerWidth != 'undefined') {
  112.         viewportwidth = window.innerHeight;
  113.     } else {
  114.         viewportwidth = document.documentElement.clientHeight;
  115.     }
  116.     if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
  117.         window_width = viewportwidth;
  118.     } else {
  119.         if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
  120.             window_width = document.body.parentNode.clientWidth;
  121.         } else {
  122.             window_width = document.body.parentNode.scrollWidth;
  123.         }
  124.     }*/
  125.     //var popUpDiv = document.getElementById(popUpDivVar);
  126.     //window_width=window_width/2-150;//150 is half popup's width
  127.         //window_width = 45; 
  128.     //popUpDiv.style.left = window_width + 'px';
  129.         $("#"+popUpDivVar)[0].style.left = 45 + 'px';   
  130.  
  131. }
  132.  
  133.  
  134.  
  135.  
  136. </script>
  137.  
  138. <style> 
  139. #wrapper {
  140. background-color:#111;
  141. opacity: 0.65;
  142. filter:alpha(opacity=65);
  143. position:absolute;
  144. z-index: 9001;
  145. top:0px;
  146. left:0px;
  147. width:50%;
  148. }
  149. </style>
  150.  
  151. <body > <a href="javascript:displayBox('wrapper',4);">  Upload Source </a> </body>
  152.  
  153. <div id="wrapper" style="display:none;">
  154.   <div id="close"><a href="javascript:toggle('wrapper');" title="close" ><img src="close.jpg" border="0"></a></div>
  155.     <div id="content">
  156.         <h1>Ajax File Upload Demo</h1>
  157.  
  158.         <img id="loading" src="loading.gif" style="display:none;">
  159.         <form name="form" action="" method="POST" enctype="multipart/form-data">
  160.         <table cellpadding="0" cellspacing="0" class="tableForm">
  161.  
  162.         <thead>
  163.             <tr>
  164.                 <th>Please select a file and click Upload button</th>
  165.             </tr>
  166.         </thead>
  167.         <tbody>    
  168.  
  169.                          <tr>
  170.             <td height=35><input id="fileToUpload0" type="file" size="45" name="fileToUpload0" class="input"></td>
  171.                         </tr>
  172.  
  173.                       <tr id="opt1" style="display:none;">
  174.             <td height=35><input id="fileToUpload1" type="file" size="45" name="fileToUpload1" class="input"></td>
  175.                         </tr>                
  176.                       <tr id="opt2" style="display:none;">
  177.             <td height=35><input id="fileToUpload2" type="file" size="45" name="fileToUpload2" class="input"></td>
  178.                         </tr> 
  179.                       <tr id="opt3" style="display:none;">
  180.             <td height=35><input id="fileToUpload3" type="file" size="45" name="fileToUpload3" class="input"></td>
  181.                         </tr>  
  182.                       <tr id="opt4" style="display:none;">
  183.             <td height=35><input id="fileToUpload4" type="file" size="45" name="fileToUpload4" class="input"></td>
  184.                         </tr>  
  185.  
  186.  
  187.         </tbody>
  188.             <tfoot>
  189.                 <tr>
  190.                     <td><button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">Upload</button></td>
  191.                 </tr>
  192.             </tfoot>
  193.  
  194.     </table>
  195.         </form>        
  196.     </div>
  197.  
  198.  
Server file - php (doajaxfileupload.php)

Expand|Select|Wrap|Line Numbers
  1. <?php
  2.     $error = "";
  3.     $msg = "";
  4.     $fileElementName = "fileToUpload";
  5.  
  6.         for($j=0;$j<5;$j++)
  7.         {  
  8.         //echo "Hi";
  9.         //echo "name is :".$_FILES["fileToUpload1"]["name"]."<br />";
  10.     //if(!empty($_FILES[$fileElementName.$j]['error']))
  11.      if($_FILES["fileToUpload".$j]['error']>0)
  12.     {
  13.     $error = "Some error in file upload";
  14.      }
  15.     else 
  16.     {
  17.         move_uploaded_file($_FILES["fileToUpload".$j]["tmp_name"],"http://bytes.com/images/".$_FILES["fileToUpload".$j]["name"]);
  18.      }
  19.    }        
  20. ?>
  21.  
Javascript file(ajaxfileupload.js )
===================================
Expand|Select|Wrap|Line Numbers
  1. jQuery.extend({
  2.  
  3.  
  4.     createUploadIframe: function(id, uri)
  5.     {
  6.             //create frame
  7.             var frameId = 'jUploadFrame' + id;
  8.  
  9.             if(window.ActiveXObject) {
  10.                 var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />');
  11.                 if(typeof uri== 'boolean'){
  12.                     io.src = 'javascript:false';
  13.                 }
  14.                 else if(typeof uri== 'string'){
  15.                     io.src = uri;
  16.                 }
  17.             }
  18.             else {
  19.                 var io = document.createElement('iframe');
  20.                 io.id = frameId;
  21.                 io.name = frameId;
  22.             }
  23.             io.style.position = 'absolute';
  24.             io.style.top = '-1000px';
  25.             io.style.left = '-1000px';
  26.  
  27.             document.body.appendChild(io);
  28.  
  29.             return io            
  30.     },
  31.     createUploadForm: function(id, fileElementId)
  32.     {
  33.         //create form    
  34.         var formId = 'jUploadForm' + id;
  35.         var fileId = 'jUploadFile' + id;
  36.         var form = $('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');    
  37.         var oldElement = $('#' + fileElementId);
  38.         var newElement = $(oldElement).clone();
  39.         $(oldElement).attr('id', fileId);
  40.         $(oldElement).before(newElement);
  41.         $(oldElement).appendTo(form);
  42.         //set attributes
  43.         $(form).css('position', 'absolute');
  44.         $(form).css('top', '-1200px');
  45.         $(form).css('left', '-1200px');
  46.         $(form).appendTo('body');        
  47.         return form;
  48.     },
  49.  
  50.     ajaxFileUpload: function(s) {
  51.         // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout        
  52.         s = jQuery.extend({}, jQuery.ajaxSettings, s);
  53.         var id = new Date().getTime()        
  54.         var form = jQuery.createUploadForm(id, s.fileElementId);
  55.         var io = jQuery.createUploadIframe(id, s.secureuri);
  56.         var frameId = 'jUploadFrame' + id;
  57.         var formId = 'jUploadForm' + id;        
  58.         // Watch for a new set of requests
  59.         if ( s.global && ! jQuery.active++ )
  60.         {
  61.             jQuery.event.trigger( "ajaxStart" );
  62.         }            
  63.         var requestDone = false;
  64.         // Create the request object
  65.         var xml = {}   
  66.         if ( s.global )
  67.             jQuery.event.trigger("ajaxSend", [xml, s]);
  68.         // Wait for a response to come back
  69.         var uploadCallback = function(isTimeout)
  70.         {            
  71.             var io = document.getElementById(frameId);
  72.             try 
  73.             {                
  74.                 if(io.contentWindow)
  75.                 {
  76.                      xml.responseText = io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:null;
  77.                      xml.responseXML = io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document;
  78.  
  79.                 }else if(io.contentDocument)
  80.                 {
  81.                      xml.responseText = io.contentDocument.document.body?io.contentDocument.document.body.innerHTML:null;
  82.                     xml.responseXML = io.contentDocument.document.XMLDocument?io.contentDocument.document.XMLDocument:io.contentDocument.document;
  83.                 }                        
  84.             }catch(e)
  85.             {
  86.                 jQuery.handleError(s, xml, null, e);
  87.             }
  88.             if ( xml || isTimeout == "timeout") 
  89.             {                
  90.                 requestDone = true;
  91.                 var status;
  92.                 try {
  93.                     status = isTimeout != "timeout" ? "success" : "error";
  94.                     // Make sure that the request was successful or notmodified
  95.                     if ( status != "error" )
  96.                     {
  97.                         // process the data (runs the xml through httpData regardless of callback)
  98.                         var data = jQuery.uploadHttpData( xml, s.dataType );    
  99.                         // If a local callback was specified, fire it and pass it the data
  100.                         if ( s.success )
  101.                             s.success( data, status );
  102.  
  103.                         // Fire the global callback
  104.                         if( s.global )
  105.                             jQuery.event.trigger( "ajaxSuccess", [xml, s] );
  106.                     } else
  107.                         jQuery.handleError(s, xml, status);
  108.                 } catch(e) 
  109.                 {
  110.                     status = "error";
  111.                     jQuery.handleError(s, xml, status, e);
  112.                 }
  113.  
  114.                 // The request was completed
  115.                 if( s.global )
  116.                     jQuery.event.trigger( "ajaxComplete", [xml, s] );
  117.  
  118.                 // Handle the global AJAX counter
  119.                 if ( s.global && ! --jQuery.active )
  120.                     jQuery.event.trigger( "ajaxStop" );
  121.  
  122.                 // Process result
  123.                 if ( s.complete )
  124.                     s.complete(xml, status);
  125.  
  126.                 jQuery(io).unbind()
  127.  
  128.                 setTimeout(function()
  129.                                     {    try 
  130.                                         {
  131.                                             $(io).remove();
  132.                                             $(form).remove();    
  133.  
  134.                                         } catch(e) 
  135.                                         {
  136.                                             jQuery.handleError(s, xml, null, e);
  137.                                         }                                    
  138.  
  139.                                     }, 100)
  140.  
  141.                 xml = null
  142.  
  143.             }
  144.         }
  145.         // Timeout checker
  146.         if ( s.timeout > 0 ) 
  147.         {
  148.             setTimeout(function(){
  149.                 // Check to see if the request is still happening
  150.                 if( !requestDone ) uploadCallback( "timeout" );
  151.             }, s.timeout);
  152.         }
  153.         try 
  154.         {
  155.            // var io = $('#' + frameId);
  156.             var form = $('#' + formId);
  157.             $(form).attr('action', s.url);
  158.             $(form).attr('method', 'POST');
  159.             $(form).attr('target', frameId);
  160.             if(form.encoding)
  161.             {
  162.                 form.encoding = 'multipart/form-data';                
  163.             }
  164.             else
  165.             {                
  166.                 form.enctype = 'multipart/form-data';
  167.             }            
  168.             $(form).submit();
  169.  
  170.         } catch(e) 
  171.         {            
  172.             jQuery.handleError(s, xml, null, e);
  173.         }
  174.         if(window.attachEvent){
  175.             document.getElementById(frameId).attachEvent('onload', uploadCallback);
  176.         }
  177.         else{
  178.             document.getElementById(frameId).addEventListener('load', uploadCallback, false);
  179.         }         
  180.         return {abort: function () {}};    
  181.  
  182.     },
  183.  
  184.     uploadHttpData: function( r, type ) {
  185.         var data = !type;
  186.         data = type == "xml" || data ? r.responseXML : r.responseText;
  187.         // If the type is "script", eval it in global context
  188.         if ( type == "script" )
  189.             jQuery.globalEval( data );
  190.         // Get the JavaScript object, if JSON is used.
  191.         if ( type == "json" )
  192.             eval( "data = " + data );
  193.         // evaluate scripts within html
  194.         if ( type == "html" )
  195.             jQuery("<div>").html(data).evalScripts();
  196.             //alert($('param', data).each(function(){alert($(this).attr('value'));}));
  197.         return data;
  198.     }
  199. })
  200.  
  201.  
Style (ajaxfileupload.css)
===================================
Expand|Select|Wrap|Line Numbers
  1. html, body
  2. {
  3.     margin: 0;
  4.     padding: 0;
  5. }
  6. body
  7. {
  8.     font: 12px/1.3em Arial, Helvetica, sans-serif;
  9.     color: #000;
  10.     background-color: #fff;
  11. }
  12. h1, h2, h3, h4, h5
  13. {
  14.     margin: 0 0 1em;
  15.     color: #F2683E;
  16. }
  17. h1
  18. {
  19.     font-size: 18px;
  20.     font-weight: normal;
  21. }
  22. p{margin: 0 0 1em;}
  23. a,
  24. a:link,
  25. a:visited{color: #F2683E;}
  26. a:hover,
  27. a:active{}
  28. a img{border: none;}
  29. form{margin: 0;}
  30. fieldset{padding: 0;}
  31. hr
  32. {
  33.     height: 1px;
  34.     border: none;
  35.     color: #999;
  36.     background-color: #999;
  37. }
  38.  
  39. /* ~~~ === POSITIONG SELECTORS ======================================= ~~~ */
  40. #wrapper
  41. {
  42.     position: relative;
  43.     width: 773px;
  44.     height: 474px;
  45.     background: url(../images/kiwisaver/body_bg.gif) no-repeat  0 0;
  46. }
  47.  
  48. #content
  49. {
  50.     float: left;
  51.     display: inline;
  52.     width: 541px;
  53.     height: 341px;
  54.     margin: 30px 0 0 8px;
  55.     padding: 22px;
  56. }
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>)
Attached Images
File Type: png working_scene.png (18.5 KB, 226 views)
Attached Files
File Type: zip WorkingCopy.zip (23.1 KB, 150 views)
Aug 1 '10 #1
Share this question for a faster answer!
Share on Google+

Post your reply

Sign in to post your reply or Sign up for a free account.