0

работаю над формой отправки и в ней есть функция загрузки своего изображения, но так-же должна быть возможность его удалить(к примеру если пользователь передумал или мискликнул), столкнулся с проблемой удаления уже загруженного файла, логика такова, польз. нажимает на кнопку инпута, выбирает файл, загружает его, потом (если требуется) нажимает на кнопку удаления этого файла, проблема в том что если он так сделает, то не сможет больше заново загрузить файл который удалил, проблема в том что я при нажатии на кнопку удаляю файл только визуально в 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();
                        });
                    });
                }
            });
        });
    });
}
3
  • Непонятно, проблема удалить файл на сервере?
    – DiD
    22 ноя 2020 в 20:51
  • Проблема в том что если польз. нажмет на кнопку удалить файл, то он не сможет больше его заново загрузить, только если перезагрузит страницу
    – DeeEss
    22 ноя 2020 в 20:54
  • Ничего удалять с сервера не нужно, так как оно еще туда не попало, это редактирование формы перед отправкой на сервер
    – DeeEss
    22 ноя 2020 в 20:56

1 ответ 1

2

Если нужно отчистить <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>

2
  • Немного исправил ответ. Вот так должно точно работать. Можно адаптировать под ваш код.
    – DiD
    22 ноя 2020 в 21:14
  • Спасибо, помогло
    – DeeEss
    3 дек 2020 в 13:16

Ваш ответ

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

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