上传图片后如何更改 DIV 的背景？答案

【问题标题】：How do I change the background of a DIV after uploading an image?上传图片后如何更改 DIV 的背景？
【发布时间】：2015-10-14 21:08:35
【问题描述】：

现在我有一个占位符图像设置为背景，上面有一个不可见的 asp:FileUpload。用户单击并选择图像后，我想更改占位符图像（使用 css 背景设置）。

<div id="icon">
    <asp:FileUpload ID="AvatarUpload" CssClass="avatar-upload" runat="server" size="38" />
</div>

CSS：

#icon {
    width: 120px;
    height: 120px;
    background: url("../image/mobile/upload-avatar.png") no-repeat bottom center;
    background-size: 120px 120px;
}

.avatar-upload {
    opacity: 0;
    width: 100%;
    height: 120px;
    cursor: pointer;
}

有没有办法在没有提交/上传按钮的情况下做到这一点？

【问题讨论】：

标签： javascript css asp.net upload

【解决方案1】：

这应该可以满足您的需要：

    var icon = document.querySelector('#icon');
    document.querySelector('#AvatarUpload').addEventListener("change",function(e){        
       icon.style.background = 'url('+URL.createObjectURL(e.target.files[0])+')';
    });

#icon{
  width : 120px;
  height : 120px;
  background : red;
  background-size: contain ! important;
  overflow : hidden;
 }

#AvatarUpload{
  opacity: 0;
  width: 100%;
  height: 120px;
}

<div id="icon">
  <input type="file" id="AvatarUpload"/>
</div>

【讨论】：