title: upload more than one image with ajax
body: <p>I wrote script that alows users to submit comment text with image, and I did it with ajax. </p>
  
  <p>yes - upload image with ajax. it's not drag &amp; drop...</p>
  
  <p>I would like to expand this scrpit and alow users to upload more than one file/image. my code don't support that (server side gets only 1 file). can you help me to fix it so I could upload array of files?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;form class="form-horizontal" action='#' method="post"  enctype="multipart/form-data"&gt;
      &lt;input type='hidden' name='comment[pageName]' value='yard' class="pagename-field" /&gt;
      &lt;input type='hidden' name='comment[refID]' value='0' class="refid-field" /&gt;
      &lt;input type='hidden' name='allowReply' value='1' class="allowReply-field" /&gt;
  
      &lt;textarea class="form-control comment-field" name="comment[text]" rows="1" placeholder="כתוב/י תגובה"&gt;&lt;/textarea&gt;
      &lt;input type='file' name='file[]' class='form-control file-field hideBox' maxlength='1' accept="image/jpg,image/png,image/jpeg,image/gif"  id="uploadFile0"/&gt;
  
      &lt;button class="btn btn-primary submit" &gt;SUBMIT&lt;/button&gt;
      &lt;img src="images/loading.gif" align="absmiddle" class="loader" id="loader"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$(function() {
      $(document).on('submit','form',function(e) {
          e.preventDefault(); 
  
          var $form = $(this);
          var act = 'add';
          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('comment[refID]',  $form.find('.refid-field').val());            
          form_data.append('allowReply',  $form.find('.allowReply-field').val());            
          form_data.append('feel',  $form.find('.feel-field').val());            
          form_data.append('file[]', file_data);
          $("#loader").show();
      //  alert(form_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; // avoid to execute the actual submit of the form.
      });
  });
  </code></pre>