How to upload multiple images using ajax in php

Question

I have a UI like this:

I want to upload some videos using ajax in php. For this, I tried FormData () in jQuery. But it only uploads one image, nothing more.

My form file:

<form enctype="multipart/form-data" action="/test.php" method="post" class="putImages"> <input name="media[]" type="file" multiple/> <input class="button" type="submit" alt="Upload" value="Upload" /> <button type="button" id="add"></button> </form> 

My jQuery file:

 <script type="text/javascript"> $(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); } }); }); }); </script> 

Can anyone solve this problem? Thanks!

Answer 1

To download the ajax file, I would recommend using dropzone.js. It has fantastic documentation and the flexibility is great.

Answer 2

Finally, I implemented using https://developer.mozilla.org/en-US/docs/Web/API/FormData/append

 $.each($("input[type=file]"), function (i, obj) { $.each(obj.files, function (j, file) { ajaxData.append('file[' + i + ']', file); }) });