Есть задача: реализовать предпросмотр файлов при выборе их в 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-е нужны для добавления большего функционала. Потому и был выбран такой путь реализации. Ну, это так, на всякий случай.