title: using ajax to upload multiple files
body: <p>I have a simple form which allows the user to upload comment text and files to the server. When the form is submitted, the file upload process is handled in 'upload.php' file. It works perfectly fine for uploading only 1 file.</p>
  
  <p>I would like <strong>my script</strong> to be able upload  multiple files with AJAX.</p>
  
  <p>This is what I did so far -</p>
  
  <p>HTML (part of it):</p>
  
  <pre><code>&lt;input type='file' name='file[]' maxlength='1' accept="image/jpg,image/png,image/jpeg,image/gif" /&gt;
  &lt;input type='file' name='file[]' maxlength='1' accept="image/jpg,image/png,image/jpeg,image/gif" /&gt;
  &lt;input type='file' name='file[]' maxlength='1' accept="image/jpg,image/png,image/jpeg,image/gif" /&gt;
  </code></pre>
  
  <p>and so on...I don't know how many files will be upload in advanced. users have script that allows them to upload as many they want to.</p>
  
  <p>JS</p>
  
  <pre><code>$(function() {
      $(document).on('submit','form',function(e) {
          e.preventDefault(); 
  
      var $form = $(this);
      var file_data = $form.find('.file-field').prop('files')[0];   
      var form_data = new FormData();       
      form_data.append('act', act);
      form_data.append('comment[text]',  $form.find('.comment-field').val());   
      form_data.append('comment[pageName]',  $form.find('.pagename-field').val());   
  
      form_data.append('file[]', file_data);
  
  
  
      $.ajax({
             type: "POST",
             url: "ajax/addComment.php",
  
             dataType: 'text',  
             cache: false,
             contentType: false,
             processData: false,  
             async: false,
             data: form_data,
             success: function(data)
             {
                  $("#loader").hide();
                  $('#commentsBox'+$form.find('.refid-field').val()).prepend(data);
                   $("form").reset(); 
  
             }
  
           });
  
      return false; 
  
      });
  });
  </code></pre>