Question

现在我将占位符图像设置为背景，其中包含一个不可见的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;
}

有没有办法在没有提交/上传按钮的情况下执行此操作？

Answer 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>

上传图像后如何更改DIV的背景？

1 个答案: