Всем доброго времени суток! С JS познакомился недавно и появились некоторые проблемы.
У меня стоит задача загрузки файлов на сервер и показ их превью на форме страницы. Это у меня получилось. Но для удобства хотелось бы, под каждое превью добавлять имена файлов
Так это выглядит сейчас.
Я пробовал добавлять имена файлов как у меня получилось реализовать удаление на крестик, но таким образом имена файлов идут последовательно за картинкой, а мне хотелось бы чтоб они были под картинкой или на ней снизу.
Помогите пожалуйста структурировать код или дайте наводку как можно это реализовать, не меняя мой код кардинально.
Заранее спасибо!
JS код:
// Загрузка файлов
function uploadFile(file) {
var url = 'temp.php';
var xhr = new XMLHttpRequest();
var formData = new FormData();
formData.append('files[]', file);
xhr.open('POST', url, true);
xhr.send(formData);
}
// Превью
let idr = 0;
var a = new Array();
function previewFile(file) {
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onloadend = function() {
let img1 = document.createElement('img');
let div1 = document.createElement('img');
img1.src = reader.result;
div1.src = "img/close.png";
img1.id = "im"+idr;
div1.id = "n"+idr;
a[idr] = file.name;
idr = idr+1;
div1.classList.add('btn1');
img1.classList.add('img1');
document.getElementById('gallery').appendChild(img1);
document.getElementById('gallery').appendChild(div1);
}
}
// Удаление
function delNames(id) {
filename = filename.replace(a[id] + ',','');
document.getElementById('n1').value = filename;
}
$(document).on('click','.btn1',function(e){
var id = $(this).attr("id");
id = parseInt(id.match(/\d+/));
id = "im" + id;
var elemf=document.getElementById(id);
elemf.parentNode.removeChild(elemf);
id = parseInt(id.match(/\d+/));
id = "n" + id;
elemf=document.getElementById(id);
elemf.parentNode.removeChild(elemf);
id = parseInt(id.match(/\d+/));
delNames(id);
});
