<div class="form-items-img-preview">
<p>Тут буде прев'ю зображення для слайдера</p>
</div>
<div class="form-items-img-load">
<input required type="file" name="slider-img-load" class="slider-load">
</div>
function previewImage() {
let input = document.querySelector('.slider-load')
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
let elem = document.querySelectorAll('.form-items-img-preview img')
if(elem.length > 0) return;
if(document.querySelector('.form-items-img-preview p') !== undefined){
document.querySelector('.form-items-img-preview p').remove()
let img = document.createElement('img');
img.src = e.target.result;
img.style.cssText = `display: inline-block;max-width: 100%; max-height: 100%;`
document.querySelector('.form-items-img-preview').append(img)
}
}
reader.readAsDataURL(input.files[0]); // convert to base64 string
}
}
document.querySelector('.slider-load').addEventListener('change', ()=>{
previewImage();
});
При повторной загрузке изображение в блоке превью не меняется. В самом инпуте меняется. Пробовал удалять изображения вначале функции, но не помогло.