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

Question

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

我还在开发一个按钮 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

CSS中background-image属性的值是由url(、后跟URL、[=13组成的字符串=].

它不是文件对象。

因此您需要获取该文件对象并将其转换为 URL。另一个问题解释了如何做到这一点。

然后需要将结果包裹在url(和)中赋值：

.then( data => {
    document.getElementById("avatar-label").style.backgroundImage = `url(${data})`;
})

Answer 2

Here are making thumbnail on uploading image

清除所选字段很简单。

您将 '' 分配给 "src" 属性 of html "img" 元素和值属性 of html "input"元素.

尽可能将 "label" 替换为 "img"。

Answer 3

后台显示

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

您可以更改脚本以显示如下背景图片

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";
};

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

Setting file input as background for an HTML element

html

javascript

css

file-upload