Multiple photo upload using query

Question

I'm trying to send multiple photos with the help of file input and jquery. I've tried-

//html part=============
<div class="form-group">
     <input class="button" type="file" name="files" multiple />
</div>

<button id="AddMorePhoto">Add more photo </button>

//JQuery part ============
$('#AddMorePhoto').on('click', function (e) {
     e.preventDefault();
     $('<div/>').addClass('form-group')
        .html($('<input class="multiplephoto" type="file" name="files" multiple />')).insertBefore(this);
    });

//Submitting to server=================
var formdata= new FormData();
var fileInput = $('.multiplephoto');
for (var i = 0; i < fileInput.length; i++) {
   formdata.append('photos',fileInput[i]); //no photo appending here
}

But photos are not being appended to formdata. Any help?

Answer 1

Try with this code :

$(document).on("click", "submit", function (e) {
e.preventDefault();
var inputs = $(".form-group input[type=file]");
     $.each(inputs, function (obj, f) {
          for(var i=0; i<f.files.length; i++){
             myFormData.append('photo', f.files[i]);
          }
    });

});