jquery - 使用 jquery 更改 div 上的背景图像

Question

不明白为什么这不起作用？如果我将一个简单的 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>

Answer 1

这里:

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

function fasterPreview(uploader) {
  if (uploader.files && uploader.files[0]) {
  var reader = new FileReader();
  reader.readAsDataURL(uploader.files[0]);
  reader.onloadend = function(){
    document.getElementById("imgDivEdit").style.backgroundImage = "url(" + reader.result + ")";  
   }
  }
}
$("#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>