Как удалить изображение которые уже выбрал в инпуте

Question

работаю над формой отправки и в ней есть функция загрузки своего изображения, но так-же должна быть возможность его удалить(к примеру если пользователь передумал или мискликнул), столкнулся с проблемой удаления уже загруженного файла, логика такова, польз. нажимает на кнопку инпута, выбирает файл, загружает его, потом (если требуется) нажимает на кнопку удаления этого файла, проблема в том что если он так сделает, то не сможет больше заново загрузить файл который удалил, проблема в том что я при нажатии на кнопку удаляю файл только визуально в DOM, как можно сделать это правильно? Чтобы можно было удалить файл и выбрать его еще раз?

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(el => {
                        el.addEventListener('click', () => {
                            const item = el.closest('.cart-block__img-file');
                            item.remove();
                        });
                    });
                }
            });
        });
    });
}

Answer 1

Если нужно отчистить <input>, то можно сделать это так:

let control = document.querySelector("#control"),
    clearBn = document.querySelector("#clear");

// Событие по клику на кнопку
clearBn.addEventListener("click", function(){
   control.value = '';
   let newControl = control.cloneNode( true )
   control.replaceWith( newControl );
   control = newControl;
});

<input type="file" id="control">
<button id="clear">Отмена</button>

Я даже накидал для вас код с предпросмотром картинок.

// Сам <input>
let  input = document.querySelector('input[type="file"]');
// Блок предпросмотра
const preview = document.querySelector('.preview');
// Кнопка отправки файлов
const button = document.querySelector('button');
// Список файлов
const fileList = [];

// Обработчик кнопки Send
button.addEventListener('click', ()=>{
  if(!fileList.length){
    alert('Отправлять нечего');
    return;
  }
  //console.log(fileList);

  // Отправлять мы ничего не будем, просто отобразим простой alert()
  alert(JSON.stringify(fileList.map(
    ({name,modified,size}) =>
    ({name,modified,size,data:'<[!FILEDATA]>'})
  ),null,2));
});

// Вешаем функцию onChange на событие change у <input>
input.addEventListener('change', onChange);

function onChange () {
  // По каждому файлу <input>
  [...input.files].forEach(file=>{
    // Создаём читателя
    const reader = new FileReader;
    // Вешаем событие на читателя
    reader.addEventListener('loadend', ()=>{
      // Элемент списка .preview
      const item = document.createElement('li');
      // Картинка для предпросмотра
      const image = new Image;
      // URI картинки
      image.src = `data:${file.type};base64,${btoa(reader.result)}`;
      // Ссылка на исключение картинки из списка выгрузки
      const remove = document.createElement('a');
      remove.innerHTML = '⊗';
      remove.href="#";
      // Элемент массива fileList
      const fileItem = { name: file.name,
                         modified:file.lastModified,
                         size:file.size,
                         data: reader.result };
      // Добавляем элемент в список выгрузки
      fileList.push(fileItem);
      // Обработчик клика по ссылке исключения картинки
      remove.addEventListener('click',()=>{
        // Исключаем элемент с картинкой из списка выгрузки
        fileList.splice(fileList.indexOf(fileItem), 1);
        // Удаляем элемент списка (<li>) из <ul> 
        item.classList.add('removing');
        setTimeout(()=>item.remove(),100);
      });
      item.appendChild(remove);
      item.appendChild(image);
      preview.appendChild(item);
    });
    // Запускаем чтение файла
    reader.readAsBinaryString(file);
  });
  // Сбрасываем значение <input>
  input.value = '';
  // Создаем клон <input>
  const newInput = input.cloneNode(true);
  // Заменяем <input> клоном
  input.replaceWith(newInput);
  // Теперь input будет указывать на клона
  input = newInput;
  // Повесим функцию onChange на событие change у нового <input>
  input.addEventListener('change', onChange);
}

* { box-sizing: border-box; }
    .preview {
      width: 100%;
      display: block;
    }
    .preview li {
      display: block;
      list-item: none;
      padding: 3px;
      border: 1px solid #888;
      background: #aaa;
      width: 58px;
      height: 58px;
      float: left;
      margin: 10px;
      transition: .1s;
    }
    .preview li.removing {
      opacity: 0;
      transform: scale(.2) translate(120%,-120%);
    }
    .preview img {
      max-width: 50px;
      max-height: 50px;
    }
    .preview a {
      position: absolute;
      z-index:2;
      background: #f00;
      color: #fff;
      font-size: 20pt;
      line-height: 16pt;
      font-weight: bold;
      text-decoration:none;
      border-radius: 100%;
      padding: 0 2px 2px 2px;
      transform: translate(44px, -12px);
    }
    button {
      display: block;
      font-size: 16pt;
      clear: both;
    }

<input type="file" accept="image/*" multiple/>
  <ul class="preview"></ul>
  <button>╱╲ Отправить файлы ╱╲</button>

БЛОГ НА HUSL

Как удалить изображение которые уже выбрал в инпуте

Ответы (1 шт):