从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的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 + ')';