title: How do I upload multiple images using ajax in php
body: <p>I am having UI like this:
  <br/>
  <a href="https://i.stack.imgur.com/BAbwP.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BAbwP.jpg" alt="enter image description here"></a></p>
  
  <p>I want to upload multiple videos using ajax in php. For that I tried FormData() in jQuery. But it's uploading only one image, not more than that.</p>
  
  <p><strong>My Form file :</strong> </p>
  
  <pre><code>&lt;form enctype="multipart/form-data" action="/test.php" 
  method="post" class="putImages"&gt;
     &lt;input name="media[]" type="file" multiple/&gt;
     &lt;input class="button" type="submit" alt="Upload" value="Upload" /&gt;
      &lt;button type="button" id="add"&gt;&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>My jQuery file:</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function() {
          $("#add").click(function() {
              var $div = $('div[id^="inputdiv"]:last');
              var num = parseInt($div.prop("id").match(/\d+/g), 10) + 1;
              var $klon = $div.clone().prop('id', 'inputdiv' + num).appendTo("#athleteRegister").insertBefore("#submitbutton");
              $('#inputdiv' + num).find("input").attr('name', 'file[' + num + ']');
              $('#inputdiv' + num).find("input").val("");
              $('#inputdiv' + num).find("input").attr('id', 'file' + num);
              $('#inputdiv' + num).find("input").css("outline", "none");
              $('#inputdiv' + num).find("div.col-sm-1 i").attr('class', 'fa fa-minus');
              $('#inputdiv' + num).find("div.col-sm-1 button").attr('id', 'remove');
              $('#inputdiv' + num).find("img").attr('alt', 'remove');
          });
          $('#sub').click(function() {
              jQuery.each($('input[name^="media"]')[0].files, function(i, file) {
                  data.append('file-' + i, file);
              });
              $.ajax({
                  type: 'POST',
                  data: data,
                  url: "../admins/test",
                  cache: false,
                  contentType: false,
                  processData: false,
                  success: function(data) {
                      alert(data);
                  }
              });
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>Can anyone solve this problem?
  Thanks!</p>