我正在使用标准的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
是标题的id。我知道我也可以使用常规img标签,然后只使用z-index使其功能像背景图像,但这是唯一的选择吗?
只需将结果Data-URL包装在CSS的url()
函数中。还使用style
作为属性名称:
$('#home-section').attr('style', 'background-image:url(' + e.target.result + ')');
但是,更好的方法是使用带有Object-URL的File对象(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>