title: upload multiple files with ajax and jquery
body: <p>In my code there is a single form that contains 2 input elements:</p>
  
  <p><strong>text input</strong> and </p>
  
  <p><strong>file input</strong> (which will contain an image).</p>
  
  <p>I am appending each file input on button click
  and want to upload all images in an ajax call, 
  but in my PHP file I only get the final image and value of text input.</p>
  
  <p>My html and jquery code are as follows:</p>
  
  <p><strong>HTML code</strong></p>
  
  <pre><code>&lt;html&gt;
      &lt;body&gt;
          &lt;form name="ajax_image" id="ajax_image" method="post"&gt;
              &lt;input type="text" name="project_name" id="project_name" placeholder="Project Name" /&gt;&lt;br/&gt;&lt;br/&gt;
              &lt;input type="text" name="project_duration" id="project_duration" placeholder="Project Duration" /&gt;&lt;br/&gt;&lt;br/&gt;
              &lt;div id="image_uploads"&gt;
              &lt;input type="file" name="project_image[]" class="project_image" placeholder="Project Image" /&gt;
             &lt;input type="button" name="add_upload" id="add_upload" value="+" /&gt;
              &lt;br/&gt;&lt;br/&gt;
              &lt;/div&gt;
              &lt;input type="submit" name="submit"  id="submit" value="Submit" /&gt;
          &lt;/form&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Jquery code</strong></p>
  
  <pre><code>&lt;script&gt;
      $(document).ready(function () {
         var count=0;
          $("#add_upload").click(function(){ 
              var input = '&lt;input type="file" name="project_image[]" class="project_image" placeholder="Project Image"/&gt;&lt;br/&gt;&lt;br/&gt;'
                  $("#image_uploads").append(input); 
                  count++;
              });
  
          $("#ajax_image").submit(function (event) {                  
              event.preventDefault();          
              var data = new FormData();    
  
  
                     for(var j=0 ; j&lt;= count ; j++)
              {
                 // alert(j);
              $.each($(".project_image")[j].files, function (i, file)
              {          
                  data.append(i, file);
              });
              }            
              $.each($('#ajax_image').serializeArray(), function (i, obj) {
                  data.append(obj.name, obj.value)
              });
  
              $.ajax({
                  url: "http://localhost/hetal/multi_image_php_ajax.php",
                  type: "POST",
                  data: data,
                  processData: false,
                  contentType: false,
                  success: function () {
                      alert('Form Submitted!');
                  },
                  error: function () {
                      alert("error in ajax form submission");
                  }
              });
          });
      });
  
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>PHP file</strong></p>
  
  <pre><code>&lt;?php
  print_r($_POST);
  
  print_r($_FILES);
  ?&gt;
  </code></pre>