Как применить загруженное изображение к фоновому изображению?

Question

Я использую стандартный jQuery для загрузки изображения, и я хотел бы, чтобы оно использовалось в качестве фонового изображения заголовка. Фоновое изображение должно получить атрибут «url», а не атрибут «src», поэтому его все еще можно получить?

JQuery код:

function uploadImage(input){
    if (input.files && input.files[0]) {
     var reader = new FileReader();
     reader.onload = function(e) {
         $('#home-section').attr('background-image...???', e.target.result);
     }
     reader.readAsDataURL(input.files[0]);
    }
}

#home-section - это идентификатор, указанный в заголовке. Я знаю, что также могу использовать обычный тег img, а затем просто поиграть с z-индексами, чтобы он работал как фоновое изображение, но разве это единственный вариант?

Answer 1

Просто оберните результирующий URL-адрес данных в функцию url() для CSS. Также используйте style в качестве имени атрибута:

$('#home-section').attr('style', 'background-image:url(' + e.target.result + ')');

Однако лучший подход - использовать объект File (Blob) с Object-URL. Это быстрее и оставляет меньше памяти. И в качестве бонуса вы можете сбросить Filereader в целом:

function uploadImage(input){
  if (input.files && input.files[0]) {
    var url = URL.createObjectURL(input.files[0]);
    $('#home-section').attr('style', 'background-image:url(' + url + ')');
  }
}

function uploadImage(input){
    if (input.files && input.files[0]) {
     var url = URL.createObjectURL(input.files[0]);
     $('#home-section').attr('style', 'background-image:url(' + url + ')');
    }
}

document.querySelector("input").onchange = function(){uploadImage(this)};

#home-section {width:640px; height:480px}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Select image: <input type=file></label><br>
<div id=home-section></div>