How do I upload multiple images using ajax in php
<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>