Getting multiple images to display before uploading them using jquery and ajax

Question

I am trying to preview multiple images before I upload it onto my site. Although mine isn't working for some reason. I am not getting any errors in the console. Below is the JS for it,

$(function() {
// Multiple images preview in browser
var imagesPreview = function(input, placeToInsertImagePreview) {

    if (input.files) {
        var filesAmount = input.files.length;

        for (i = 0; i < filesAmount; i++) {
            var reader = new FileReader();

            reader.onload = function(event) {
                $($.parseHTML('<img>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
            }

            reader.readAsDataURL(input.files[i]);
        }
    }

};

$('#gallery-photo-add').on('change', function() {
    imagesPreview(this, 'div.gallery');
});
});

This is the html

    <div class="input-group">

 <label for="file-upload" class="custom-file-upload" ">
 <i class="fa fa-cloud-upload"></i> Chosose File...
 </label>
 <input id="file-upload" type="file" multiple id="gallery-photo-add/>          
  <button class="btn btn-lg btn-primary btn-block btn-signin-upload" type="submit">Upload</button>

</div>  
<div class="gallery"></div>

Any help would be grateful, thanks

Answer 1

Here you can find your correct code: https://jsfiddle.net/zhvdjxxo/1/ Seems like you've mistaken the ids in "onchange" function.

$(function() {

var imagesPreview = function(input, placeToInsertImagePreview) {

if (input.files) {
    console.log(input.files);
    var filesAmount = input.files.length;

    for (i = 0; i < filesAmount; i++) {
        var reader = new FileReader();

        reader.onload = function(event) {
            $($.parseHTML('<img>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
        }

        reader.readAsDataURL(input.files[i]);
    }
}

};

$('#file-upload').on('change', function() {
imagesPreview(this, 'div.gallery');
});  
});