javascript - 从 FileReader 设置 backgroundImage 样式

Question

我正在寻找一种解决方案，允许我从文件上传输入中获取文件并通过设置 document.body.style.backgroundImage 来预览它。

以下代码用于在 Image 元素中显示预览：

function setImage(id, target){
  input = document.getElementById(id);
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function (e) {
      target.src = e.target.result;
    };

        reader.readAsDataURL(input.files[0]);
  }
}

其中 id 是 的 id <input type='file'>，target 是<img>元素。

以下代码概述了我想要发生的事情，但是 e.target.result 是data:image/png;base64格式的，显然在 css 请求 url 的地方不起作用。

  function setBackgroundImage(id){
    input = document.getElementById(id);
    if (input.files && input.files[0]) {
      var reader = new FileReader();

      reader.onload = function (e) {
          document.body.style.backgroundImage = e.target.result;
      };

      reader.readAsDataURL(input.files[0]);
    }
  }

谢谢您的帮助！

Answer 1

您需要url()在 URL 周围使用：

document.body.style.backgroundImage = 'url(' + e.target.result + ')';