Как модифицировать прелоадер на jQuery?

Question

[Alexandriski]

Есть прелоадер картинок на сайте:

$(function(){
		$("#fileupload").change(function(event) {
			var x = URL.createObjectURL(event.target.files[0]);
			$("#upload-img").attr("src",x);
			console.log(event);
		});
	})

По нажатию на

<div class="custom-file">
<label class="label-up" for="fileupload"><img height="161" width="161" src="https://image.ru/img16/4023983/group-2.png" alt=""></label>
<input type="file" id="fileupload">
</div>

закидывает картинки сюда:

<div class="profile-images">
<img src="https://imageup/img107/4023976/group-1.jpg" id="upload-img">
</div>

Как сделать, чтобы можно было выбрать строго 3 картинки, а не одну?

Comments

[VolgaVolga]

Лучше код нормально оформите, если вам жизнь дорога.

Answer 1

[zkrvndm]

Произвольное количество файлов:

$(function() {
	
	$('#fileupload').change(function(event) {
		
		var html_code = '';
		
		for (var n = 0; n < event.target.files.length; n++) {
			
			html_code += '<img src="'+URL.createObjectURL(event.target.files[n])+'" id="upload-img-'+Number(n+1)+'">';
			
		}
		
		$('.profile-images').html(html_code);
		
		console.log('Выбраны файлы:', event.target.files);
		
	});
	
});

Answer 2

[Сергей Соколов]

с обработчике события change добавьте проверку на число выбранных файлов:

if (event.target.files.length !== 3) {
  // как-то сообщить, что ждём именно 3 файла
  return;
}

а когда всё ок, то либо сразу в разметке создать вместо 1 целых 3 тега с img, у каждого свой уникальный id. Либо генерить разметку трёх img на лету и заменять HTML у div.profile-images