$(document).ready(function () {
$('#thumbnails').change(function () {
previewImages(this);
});
function previewImages(input) {
var previewContainer = $('#thumbnails-preview-container');
previewContainer.empty();
if (input.files && input.files.length > 0) {
for (var i = 0; i < input.files.length; i++) {
var reader = new FileReader();
reader.onload = function (e) {
var imageSrc = e.target.result;
var imageElement = $('<img>')
.attr('src', imageSrc)
.addClass('thumbnail-preview');
var removeButton = $('<span>')
.addClass('remove-thumbnail')
.text('×')
.on('click', function () {
$(this).prev('img').remove();
$(this).remove();
var index = Array.from(input.files).indexOf(input.files.find(file => file.name === $(this).prev('img').attr('src')));
if (index !== -1) {
input.files = Array.from(input.files).filter((_, i) => i !== index);
}
});
var previewWrapper = $('<div>')
.addClass('thumbnail-preview-wrapper')
.append(imageElement)
.append(removeButton); previewContainer.append(previewWrapper);
};
reader.readAsDataURL(input.files[i]);
}
}
}
});