2

есть форма в которой польз. может добавлять изображения и при необходимости удалять его. Нужно сделать так чтобы при нажатии на кнопку, инпут очищался и можно было заново добавлять изображения. Сейчас проблема состоит в том что после того как я нажал на кнопку, то визуально все удалилось, но при попытке заново загрузить туже картинку что удалил, ничего не происходит. Как можно это решить?

HTML
<div class="cart-block__imgs">
</div>
<input class="cart-block__input-file" name="cart-block__input-file" accept="image/*" id="cart-block__input-file" type="file">
<label for="cart-block__input-file" class="cart-block__input-file_btn">Прикрепить фото</label>
JS
if(cartBlockInputFile) {
    cartBlockInputFile.forEach(el => {
        el.addEventListener('change', (event) => {
            const infoPhoto = {};
            const target = event.target;
            const reader = new FileReader();
            const file = target.files[0];
            infoPhoto.name = file.name;
            reader.readAsBinaryString(file);
            reader.addEventListener('load', event => {
                infoPhoto.base64 = btoa(event.target.result);
                const cartBlockFileMask = `
                    <div class="cart-block__img-file">
                        <span class="cart-block__file-mask">${file.name}</span>
                        <button type="button" class="cart-block__file-btn-close"><img src="assets/img/close.svg" alt="Закрыть"></button>
                    </div>
                `;
                cartBlockImgs.forEach(el => {
                    el.insertAdjacentHTML('beforeend', cartBlockFileMask)
                });
                const cartBlockFileBtnClose = document.querySelectorAll('.cart-block__file-btn-close');
                if(cartBlockFileBtnClose) {
                    cartBlockFileBtnClose.forEach(btn => {
                        btn.addEventListener('click', () => {
                            const item = btn.closest('.cart-block__img-file');
                            item.remove();
                            el.innerHTML = el.innerHTML; // то что я нашел в гугле, но оно не работает
                        });
                    });
                }
            });
        });
    });
}

1 ответ 1

2

Нашел решение, оказывается обычная очистка значения работает и на файл.

btn.addEventListener('click', () => {
  const item = btn.closest('.cart-block__img-file');
  item.remove();
  el.value = ''; // ключевая строка
});

Помогло

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.