javascript - 将文件输入设置为 HTML 元素的背景

Question

我正在创建一个用户界面，用户希望使用<input type="file">上传她的个人资料图片。单击其相应的 <label> 。我想显示图像的预览作为相同的背景<label> 。我尝试使用 inputNode.files[0]在 JavaScript 中，但它不起作用。

我还在开发一个按钮X，它清除所选文件字段值，本质上也清除背景图像，但这是目标的下一步。也欢迎就此提供一些指导，因为我也没有考虑过这一点。

document.getElementById("avatar").onchange = function(e) {
  console.log("file changed", e.target.files[0]);
  // document.getElementById("preview-img");
  document.getElementById("avatar-label").style.backgroundImage = e.target.files[0];
  // document.getElementById("avatar-label").style.backgroundImage = 'url("https://picsum.photos/70/70")';
};

#avatar {
  display: inline-block;
  height: 0;
  width: 0;
}

#avatar-label {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 70px;
  width: 70px;
  border: solid 1px #333;
  /*background: url('https://picsum.photos/70/70');*/
}

#avatar-label:hover {
  cursor: pointer;
}


/* styling for unselecting the image */

#avatar-label #unselect-image {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  border: none;
  outline: none;
  background: #fff;
}

<form action="" method="get">
  <input accept="image/*" type="file" name="avatar" id="avatar">
  <label for="avatar" id="avatar-label">
    +
    <button type="button" id="unselect-image">X</button>
  </label>
  <img src="" alt="" id="preview-img">
</form>

Answer 1

在后台显示

使用文件读取器而不是直接分配图像对象。

您可以更改脚本以显示背景图像，如下所示

document.getElementById('avatar').onchange = function (e){
    var file = e.target.files[0];

    var reader = new FileReader();
    reader.onloadend = function(){
        document.getElementById('avatar-label').style.backgroundImage = "url(" + reader.result + ")";
        document.getElementById('unselect-image').style.display = "inline";
    }
    if(file){
        reader.readAsDataURL(file);
    }
}

清除背景

为了清除背景图像，以下脚本可能会有所帮助

document.getElementById('unselect-image').onclick = function (){
    document.getElementById('avatar-label').style.background = "none";
    document.getElementById('unselect-image').style.display = "none";
};