0

При клике на "добавить фотографию" добавляем фотографию. При клике на фотографию она удаляется. Но возможность загрузить снова фотографию пропадает. Подскажите пожалуйста что я делаю не так? Спасибо, в js я новичек

function handleFileSelect(evt) {
    var file = evt.target.files; // FileList object
    var f = file[0];
    // Only process image files.
    if (!f.type.match('image.*')) {
        alert("Image only please....");
    }
    var reader = new FileReader();
    const output = document.getElementById('output');
    const inputRemove = document.querySelector('.photo-checkout__input-file-remove');
    var span = document.createElement('span');
    // Closure to capture the file information.
    reader.onload = (function (theFile) {
        return function (e) {
            // Render thumbnail.
            span.innerHTML = ['<img class="thumb" title="', escape(theFile.name), '" src="', e.target.result, '" />'].join('');
            output.insertBefore(span, null);
        };
    })(f);
    inputRemove.addEventListener("click", function (e) {
        span.remove();
    });

    reader.readAsDataURL(f);
}
document.getElementById('file').addEventListener('change', handleFileSelect, false);
.photo-checkout__block {
  position: relative;
  width: 164px;
  height: 120px;
  cursor: pointer;
  border-radius: 5px;
}
.photo-checkout__input-file {
  cursor: pointer;
  border-radius: 5px;
}

.photo-checkout__input-file span {
  display: flex;
  width: 100%;
  height: 100%;
  border-radius: 5px;
}
.photo-checkout__input-file span img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 5px;
}
.photo-checkout__input-file span:hover .photo-checkout__input-file-remove {
  opacity: 1;
  pointer-events: auto;
}
.photo-checkout__input-file input {
  cursor: pointer;
  width: 100%;
  height: 100%;
  opacity: 0;
  position: absolute;
  border-radius: 5px;
}
.photo-checkout__input-file label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  width: 165px;
  height: 120px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 500;
  font-size: 14px;
  background: #ffffff;
  transition: all 0.3s ease 0s;
  color: #000000;
}
.photo-checkout__input-file label::before {
  content: "+";
  font-size: 18px;
  width: 15px;
  height: 15px;
  margin: 0px 0px 10px 0px;
  color: #000000;
}
.photo-checkout__input-file-remove {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  border-radius: 5px;
  background: linear-gradient(
    0deg,
    rgba(54, 108, 217, 0.8),
    rgba(54, 108, 217, 0.8)
  );
  font-weight: 500;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #ffffff;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.3s ease 0s;
  pointer-events: none;
}
<div class="photo-checkout__block">
  <div class="photo-checkout__input-file">
    <input type="file" id="file" name="file" class="file">
    <label>Фотография<br> товара</label>
    <span id="output">
      <div class="photo-checkout__input-file-remove">Удалить</div>
    </span>
  </div </div>

2
  • Он не удалил картинку,вы хоть и удалили область span, но картинка в input осталась. Наведёте если мышь вылезет даже название изображения 14 мар в 10:44
  • Вот уже было такое - ru.stackoverflow.com/questions/1209017/… 14 мар в 10:50

0

Ваш ответ

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

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