Установка стиля backgroundImage из FileReader

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'>, а 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 + ')';