Javascript.RU

Создать новую тему Закрытая тема
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.04.2021, 09:24
Новичок на форуме
Отправить личное сообщение для levans Посмотреть профиль Найти все сообщения от levans
 
Регистрация: 01.04.2021
Сообщений: 1

Как добавить текст поверх картинки?
Всем доброго времени суток! С 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);  
});
Закрытая тема



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
svg - как включить текст к rect, circle и т.п.? eugen35 (X)HTML/CSS 0 25.08.2014 19:28
Отследить клик по дочернему объекту AllanZ jQuery 3 05.09.2012 11:38
Выравнять три дива в одной строке debugx (X)HTML/CSS 9 06.10.2011 11:03
как добавить текст после элемента? AquaGen jQuery 9 23.08.2011 15:21