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是<input type='file'>的ID，而target是<img>元素。

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

  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()：

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

从FileReader设置backgroundImage样式

1 个答案: