title: Implementing multiple file multipart uploads
body: <p>I'm implementing a file upload service in my project</p>
  
  <p>I have java script code that fetches the files as a list of files to be uploaded to a server.</p>
  
  <ul>
  <li><p>In order to get file upload working
  I'd like to ask how I would retrieve
  the list of the files after the max 6
  files have been  specified by the
  user? To start with I know that list would be stored in a <strong>fileslist</strong> array/hash</p></li>
  <li><p>Eventually I'm <strong>exploring</strong> using a
  library to execute the file upload
  service, I've had a look at the –
  commons fileupload - and the spring
  multipart uploads. what would be an
  efficient way forward in implementing
  this upload service</p></li>
  </ul>
  
  <p>Code Snippet Below</p>
  
  <pre><code>$(document).ready(function(){   
  var fileMax = 6;
  $('#asdf').after('&lt;div id="files_list" style="border:1px solid #666;padding:5px;background:#fff;" class="normal-gray"&gt;Files (maximum '+fileMax+'):&lt;/div&gt;');
  $("input.upload").change(function(){
  doIt(this, fileMax);
  });
  }); 
  
  
  
  
  $(document).ready(function(){   
  var fileMax = 6;
  $('#asdf').after('&lt;div id="files_list" style="border:1px solid #666;padding:5px;background:#fff;" class="normal-gray"&gt;Files (maximum '+fileMax+'):&lt;/div&gt;');
  $("input.upload").change(function(){
  doIt(this, fileMax);
  });
  }); 
  
  function doIt(obj, fm) {
  if($('input.upload').size() &gt; fm) {alert('Max files is '+fm); obj.value='';return true;}
  $(obj).hide();
  $(obj).parent().prepend('&lt;input type="file" class="upload" name="fileX[]" /&gt;').find("input").change(function() {doIt(this, fm)});
  var v = obj.value;
  if(v != '') {
  $("div#files_list").append('&lt;div&gt;'+v+'&lt;input type="button" class="remove" value="Delete" style="margin:5px;" class="text-field"/&gt;&lt;/div&gt;')
  .find("input").click(function(){
  $(this).parent().remove();
  $(obj).remove();
  return true;
  });
  }
  };
  </code></pre>
  
  <p>my form is as follows:</p>
  
  <pre><code>&lt;table border="0" cellspacing="0" cellpadding="8"&gt;
        &lt;tr&gt;
          &lt;td&gt;&lt;input type="file" id="element_input" class="upload" name="fileX[]" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;&lt;label&gt;
            &lt;textarea name="textarea" cols="65" rows="4" class="text-field" id="textarea"&gt;Add a description&lt;/textarea&gt;
          &lt;/label&gt;&lt;/td&gt;
          &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;&lt;input name="Submit" type="button" class="text-field" id="send" value="Submit" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/table&gt;&lt;br /&gt;
  </code></pre>