Блог

Главная - Вопросы по программированию - Как получить src из изображения до его изменения, чтобы использовать его позже?

Как получить src из изображения до его изменения, чтобы использовать его позже?

#javascript

Вопрос:

Я пытаюсь сделать предварительный просмотр файла, и у меня возникла проблема при создании функции для удаления загруженного изображения. Мне нужно создать функцию, которая удаляет загруженное изображение и показывает изображение по умолчанию, которое у меня есть. Предположим, у меня есть учетная запись с картинкой, и я хочу ее изменить, но когда я загрузил файл, он мне не понравился, и я хочу нажать кнопку, которая удалит эту новую картинку и вернется к первой (допустим, я ее не сохранил). Таким образом, во всех случаях мне нужно сохранить первый src в переменной, а затем использовать его позже, если это необходимо. Я воспроизведу здесь код, который я создал для предварительного просмотра файла (он хорошо работает). Теперь мне нужна помощь, чтобы создать функцию удаления в соответствии с требованиями, о которых я говорил ранее. Если это возможно, без jquery.

 const inpFile = document.getElementById("inpFile");
const previewContent = document.getElementById("imagePreview");
const previewDefaultText = previewContainer.querySelector(".previewText");
const previewImage = previewContent.querySelector(".previewImage");


    inpFile.addEventListener("change", function(){
      const file = this.files[0];

      if(file){
        const reader = new FileReader();
        previewDefaultText.style.display = "none";
        previewImage.style.display = "block";
        reader.addEventListener("load", function() {
          previewImage.setAttribute("src", this.result);
        });
        reader.readAsDataURL(file);
      }
    })

Ответ №1:

Сохраните исходный источник в dataset свойстве.

 inpFile.addEventListener("change", function() {
  const file = this.files[0];
  if (!previewImage.dataset.origSrc) {
    previewImage.dataset.origSrc = previewImage.src;
  }
  if (file) {
    const reader = new FileReader();
    previewDefaultText.style.display = "none";
    previewImage.style.display = "block";
    reader.addEventListener("load", function() {
      previewImage.setAttribute("src", this.result);
    });
    reader.readAsDataURL(file);
  }
})

removeButton.addEventListener("click", function() {
  if (previewImage.dataset.origSrc) {
    previewImage.src = previewImage.dataset.origSrc;
    previewImage.dataset.origSrc = '';
  }
});
Метки: ,