Вывод фото на лейбл js

Question

Почему происходит вывод только на один лейбл?

    document.querySelector("input").addEventListener("change", function () {
      if (this.files[0]) {
        var fr = new FileReader();
    
        fr.addEventListener("load", function () {
          document.querySelector("label").style.backgroundImage = "url(" + fr.result + ")";
        }, false);
    
        fr.readAsDataURL(this.files[0]);
      }
    });

.header_label{
  height: 221px;
  background-color: #C4C4C4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #969696;
  font-weight: normal;
}
.logo_label{
  height: 221px;
  width: 221px;
  background-color: #C4C4C4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #969696;
  font-weight: normal;
}
.logo_shop_attribs{
  margin-top: 25px;
}

    <input type="file" class="upload" id="header_upload"/>
    <label class="header_label" for="header_upload"> Upload 1280x221 header</label>

    <div class="logo_shop_attribs">
        <input type="file" class="upload" id="logo_upload"/>
        <label class="logo_label" for="logo_upload"> 221x221</label>
    </div>

Как сделать вывод разных фото на разные лейблы?

Answer 1

Нужно "пробежаться" forEach по всем найденным элементам с помощью querySelectorAll

document.querySelectorAll("input").forEach((item) => {
    item.addEventListener("change", function () {
        if (this.files[0]) {
            var fr = new FileReader();

            fr.addEventListener("load", function () {
                document.querySelector("label").style.backgroundImage = "url(" + fr.result + ")";
            }, false);

            fr.readAsDataURL(this.files[0]);
        }
    });
})

.header_label{
  height: 221px;
  background-color: #C4C4C4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #969696;
  font-weight: normal;
}
.logo_label{
  height: 221px;
  width: 221px;
  background-color: #C4C4C4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #969696;
  font-weight: normal;
}
.logo_shop_attribs{
  margin-top: 25px;
}

<input type="file" class="upload" id="header_upload"/>
    <label class="header_label" for="header_upload"> Upload 1280x221 header</label>

    <div class="logo_shop_attribs">
        <input type="file" class="upload" id="logo_upload"/>
        <label class="logo_label" for="logo_upload"> 221x221</label>
    </div>

Answer 2

Для каждого инпута назначить действия..

function UploadPhoto(input, output) {
  input.addEventListener("change", function() {
    if(this.files[0]) {
      var fr = new FileReader();

      fr.addEventListener("load", function() {
        output.style.backgroundImage = "url(" + fr.result + ")";
      }, false);

      fr.readAsDataURL(this.files[0]);
    }
  });
}

UploadPhoto(document.querySelector('#header_upload'), document.querySelector('.header_label'));
UploadPhoto(document.querySelector('#logo_upload'), document.querySelector('.logo_label'));

.header_label {
  height: 221px;
  background-color: #C4C4C4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #969696;
  font-weight: normal;
}

.logo_label {
  height: 221px;
  width: 221px;
  background-color: #C4C4C4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #969696;
  font-weight: normal;
}

.logo_shop_attribs {
  margin-top: 25px;
}

<input type="file" class="upload" id="header_upload" />
<label class="header_label" for="header_upload"> Upload 1280x221 header</label>

<div class="logo_shop_attribs">
  <input type="file" class="upload" id="logo_upload" />
  <label class="logo_label" for="logo_upload"> 221x221</label>
</div>

БЛОГ НА HUSL

Вывод фото на лейбл js

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