Clever Geek Handbook

Uploading multiple photos using query

I am trying to send multiple photos using a file input

and jquery

. I 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 added to formdata

. Any help?

+3


source to share


1 answer


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]);
          }
    });

});
0


source






More articles:


All Articles