我正在使用标准的 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
是给标题的 id。我知道我也可以使用常规 img 标签,然后只使用 z-indexes 使其像背景图片一样发挥作用,但这是唯一的选择吗?
最佳答案
简单地将结果数据 URL 包装在 CSS 的 url()
函数中。同样使用 style
作为属性名:
$('#home-section').attr('style', 'background-image:url(' + e.target.result + ')');
然而,更好的方法是使用带有 Object-URL 的文件对象 (Blob)。这样速度更快,内存占用也更小。作为奖励,您可以完全放弃 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>
关于javascript - 如何将上传的图像应用于背景图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52128466/