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

Question

我正在使用标准的jQuery上传图像，我希望它作为标题的背景图像应用。背景图像应该接收"url"而不是"src"属性，那么仍然可以获得吗？

j查询代码：

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是提供给标头的 ID。我知道我也可以使用常规的 img 标签，然后只是使用 z 索引使其像背景图像一样发挥作用，但这是唯一的选择吗？

Answer 1

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

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

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