我正在尝试更改标题的背景图像，我正在使用的 javascript 代码工作得非常好，但是当我重新加载页面时，图像被重置为默认值。 我希望 background-image 属性获得我从输入中分配的新值。
这是代码
HTML -
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel=stylesheet href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.css">
<title>CorpoViz Admin</title>
<script src="JS/editor.js"></script>
</head>
<body onload=iFrameOn()>
<div class="jumbotron" id=headerBg>
<div class="container-fluid">
<h1>Heading</h1>
<span style="float:right;">
<input type='file' id='getval' class="inputfile btn btn-default" />
<label for="getval" class="btn btn-default" style="font-size:20px;">Choose an image</label>
</span>
JavaScript-
document.getElementById('getval').addEventListener('change', readURL, true);
function readURL(){
var file = document.getElementById("getval").files[0];
var reader = new FileReader();
reader.onloadend = function(){
document.getElementById('headerBg').style.backgroundImage = "url(" + reader.result + ")";
}
if(file){
reader.readAsDataURL(file);
document.getElementById('headerBg').style.backgroundImage = <?php echo "\"url(\" + reader.result + \")\"; " ?>
}
document.getElementById('headerBg').style.backgroundImage = "url(" + reader.result + ")";
}
CSS -
#headerBg{
background-image:url('');
background-size:cover;
background-position: center;
}
最佳答案
使用localStorage或Cookies暂时保留图片url。如果您希望更改是永久性的，则将数据存储在 MySQL 等数据库中。
设置本地存储项的 javascript 代码示例:
localStorage.setItem('backgroundUrl', 'http://example.com/test123.png');
检索本地存储项的 javascript 代码示例:
localStorage.getItem('backgroundUrl');
编辑
如果您想将新图片 url 存储在您的数据库中，那么您将需要在 mysql 中有一个专门用于标题背景图片的表。
要更新表格，请检查此 url: PHP mySQLi update table
要从表中检索图像 URL，请检查此 URL:https://dev.mysql.com/doc/refman/5.5/en/select.html
关于javascript - 如何更改标题的背景图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42836421/