Как очистить инпут типа file

239
30 июня 2022, 04:40

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

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; // то что я нашел в гугле, но оно не работает
                        });
                    });
                }
            });
        });
    });
}
Answer 1

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

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

Помогло

READ ALSO
Как поместить arguments в call

Как поместить arguments в call

Я хочу запускать функцию не теряя контекст, но при этом имея возможность не привязываться к количеству аргументов

228
Basic авторизация с помощью javascript

Basic авторизация с помощью javascript

Имеем: страницу djdservice

178
Можете объяснить данную функцию?

Можете объяснить данную функцию?

Ясно, что при нажатии на ultabs__caption происходит событие и что дальше?

148
Не задаётся фон-градиент на Vue.js

Не задаётся фон-градиент на Vue.js

У меня имеются два метода, которые задают фон отдельному блокуПервый метод задаёт сплошной фон, а второй - градиент

151