title: jQuery Multiple file Upload, Retaining the files that have not been uploaded
body: <p>Need to upload the multiple files one by one. Say I've selected several files at a single stretch and display them in dynamically generating table. I'll upload one by one, as done here  <a href="http://blueimp.github.io/jQuery-File-Upload/" rel="nofollow">http://blueimp.github.io/jQuery-File-Upload/</a></p>
  
  <p>Once I click start of a particular file, it gets uploaded and returned back(RequestDispatcher.include) to the same page but with no previously selected files.
  But I need to retain the files which were not uploaded in previous request.</p>
  
  <p>I went through the answers in web, but not satisfied with the answers.</p>
  
  <p>Some possible ways that I thought which might help were:</p>
  
  <p>1) Setting cookies</p>
  
  <p>2) Storing all files temporarily before sending request and retrieving those files back to jsp page.</p>
  
  <p>But I'm a newbie and I'm getting confused with all the answers.
  Please help me on this.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//onclick funtion triggered after clicking start button
  
  function funIndividual(obj,e){
  
   var $this = $(obj);
      var rowIndex = $this.closest("tr").index();
   var singleFile =$("input[name=hidfileName]").eq(rowIndex).val();
    $('#strMode').val('UploadInd');
    $('#singleFile').val(singleFile);
     $('#fileupload').attr('action','servleturl');
     $('#fileupload').submit();
    }
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>//Snippet to generate the dynamic table
  $('#document').ready(function(){
   $('#multipleFiles').on('click',function(){
    if(document.getElementById('multipleFiles').value!=""){
        $( "#table tr" ).each( function(){
        this.parentNode.removeChild( this ); 
     });
     document.getElementById('multipleFiles').value="";
    }
   });
   
   $('#multipleFiles').on('change',function(){
       var inp = document.getElementById('multipleFiles');          
       var table = document.getElementById("table");
     for (var i = 0; i &lt; inp.files.length; ++i){ 
      var fileSize = "";
     var name = inp.files.item(i).name;    
     
     fileSize = bytesToSize(inp.files.item(i).size);
     var row = table.insertRow(0);
     row.style.backgroundColor = "#FFFFFF";
     row.style.borderBottom ="solid thin gainsboro";
     row.id='trid';
     
     
     var cell1 = row.insertCell(0);
     cell1.style.width = '10px';
     cell1.style.textAlign ="";
     
     var cell2 = row.insertCell(1);
     cell2.style.width = '400px';
     cell2.style.textAlign ="left";
     
     var cell3 = row.insertCell(2);
     cell3.style.width = '300px';
     cell3.style.textAlign ="center";
     
     var cell4 = row.insertCell(3);
     cell4.style.width = '390px';
     cell4.style.textAlign = "center";
     cell1.innerHTML = "&lt;td&gt;&lt;span class='preview'&gt;&lt;/span&gt;&lt;/td&gt;";
     cell2.innerHTML = "&lt;td align='left'&gt;&lt;input type='hidden' id='hidfileName' name='hidfileName' value="+name+"&gt;&lt;p class='name'&gt;"+name+"&lt;/p&gt;&lt;strong class='error text-danger'&gt;"+fileFormatSupported+"&lt;/strong&gt;&lt;/td&gt;";
     cell3.innerHTML = "&lt;td align='center'&gt;&lt;p class='size'&gt;"+fileSize+"&lt;/p&gt;&lt;div style='display:none' id ='progressbar'"+i+" class='progress progress-striped active' role='progressbar' aria-valuemin='0' aria-valuemax='100' aria-valuenow='0'&gt;&lt;div class='progress-bar style='display:none' progress-bar-success' style='width:10%;'&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;";
     cell4.innerHTML = "&lt;td align='center'&gt;&lt;span id='btnStartInd"+i+"' name='btnStartInd' class='btn btn-primary start' onclick='javascript:funIndividual(this,event)' "+isValidFile+"&gt;&lt;i class='glyphicon glyphicon-upload'&gt;&lt;/i&gt;&lt;span&gt; Start&lt;/span&gt;&lt;/span&gt;&amp;nbsp;&lt;span onclick='javascript:funcancelInd(this,event)' id='btnCancelInd"+i+"' class='btn btn-warning'&gt;&lt;i class='glyphicon glyphicon-ban-circle'&gt;&lt;/i&gt;&lt;span&gt; Cancel&lt;/span&gt;&lt;/span&gt;&lt;/td&gt;"+ "&lt;/tr&gt;";
     
     }
  
   });
  });</code></pre>
  </div>
  </div>
  </p>