Изменение фонового изображения на div с помощью jquery - PullRequest
0 голосов
/ 11 ноября 2019

Не можете понять, почему это не должно работать? если я использую простой img с src, то он работает, но когда я пытаюсь изменить его на change background, то нет. Я приложил код, как я могу изменить фон с помощью jQuery? Я пытаюсь сделать вариант изменения профиля для пользователя. Поэтому, если он меняет картинку, то Background-image также меняется на новую загруженную.

$("#ChangeImg").click(function(e) {
  $("#imageUpload").click();
});

function fasterPreview(uploader) {
  if (uploader.files && uploader.files[0]) {
    document.getElementById(imgDivEdit).style.backgroundImage = uploader.files[0];
  }
}
$("#imageUpload").change(function() {
  fasterPreview(this);
});
#imageUpload {
  display: none;
}

.container {
  position: relative;
  width: 125px;
  height: 125px;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 125px;
  width: 125px;
  opacity: 0;
  transition: .5s ease;
  background-color: rgba(11, 90, 180, 0.795);
  border-radius: 50%;
}

.container:hover .overlay {
  opacity: 0.7;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  cursor: pointer;
}

#imgDivEdit {
  width: 125px;
  height: 125px;
  background-image: url("https://www.whatsappprofiledpimages.com/wp-content/uploads/2019/01/Nice-Whatsapp-DP-Profile-Images-4-300x300.jpg");
  background-position: 5px -5px;
  border-radius: 50%;
  background-size: cover;
}
<div id="avatar"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div id="imgDivEdit"></div>
  <div id="ChangeImg" class="overlay">
    <div class="text">Change Image</div>
  </div>
</div>
</div>
<input id="imageUpload" type="file" name="profile_photo" placeholder="Photo" required="" capture>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...