如何将上传的图像应用于背景图像？

Question

我正在使用标准 jQuery 上传图片，我希望将其用作页眉的背景图片。 background-image 应该接收 '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 是给header的id。我知道我也可以使用常规 img 标签，然后使用 z-indexes 使其像背景图片一样发挥作用，但这是唯一的选择吗？

Answer 1

只需将结果 Data-URL 包装在 CSS 的 url() 函数中。还使用 style 作为属性名称：

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

不过，更好的方法是将文件对象 (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>

如何将上传的图像应用于背景图像？

How to apply an uploaded image to a background-image?

javascript

jquery

background-image

filereader