Почему внутри элемента списка создается фантомный файл не содержащий src?

Question

[Aodhan]

Есть задача: реализовать предпросмотр файлов при выборе их в input [multiple]. Вродебы все работает, но при выборе изображений, в элементе списка появляется еще один пустой тег img. Ну никак не могу понять откуда он там берется.

function handleFiles(files) {
											for (let i = 0; i < files.length; i++){
												const file = files[i];
												const img = document.createElement("img");
												let elements = [];
												img.classList.add("obj");
												img.id = i+1;
												img.file = file;
												$(img).attr('key', i+1);
												elements = '<li><span class="img-move">'+(i+1)+'</span><div class="img-wrapper draggable-element d-'+(i+1)+'"><span class="img-delete"><i class="fa fa-close "></i></span></div></li>';
												$('#images').append(elements);
												const reader = new FileReader();
												reader.onload = (function (aImg) {
													return function (e) {
														aImg.src = e.target.result;
													};
												})(img);
												$('.img-wrapper').append(img);
												reader.readAsDataURL(file);
											}

										}

На выходе:
P.S. Остальные элементы в wrapper-е нужны для добавления большего функционала. Потому и был выбран такой путь реализации. Ну, это так, на всякий случай.

Answer 1

[0xD34F]

$('.img-wrapper').append(img);

Тут вы добавляете картинку сразу во все существующие wrapper'ы.
А надо в один конкретный.
Меняйте эту строку на

$(`.img-wrapper.d-${i + 1}`).append(img);