Ill*_*705 5 html javascript css image
我有一个项目，用户可以在其中上传图像，图像将存储在 MongoDB 数据库中。每次上传新图像时，如何在不刷新页面的情况下更新页面上 div 的背景图像？我尝试删除背景图像并重新添加它，但它似乎不起作用：
function updateLogo() {
console.log("update");
$("#chain-logo").css("background-image", "none");
$("#chain-logo").css("background-image", `url("/api/images/chain/${chainId}")`);
}
这是将图像发送到服务器然后调用 updateLogo 的代码：
function uploadLogo() {
let file = document.getElementById("logo-input").files[0];
let formData = new FormData();
formData.append("logo", file);
fetch(`/chain/${chainId}/upload/logo`, {
method: "POST",
body: formData
})
.then(response => response.json())
.then(data => {
updateLogo();
});
}
页面的 HTML：
<body>
<div id="header-container"></div>
<div id="administrator-message-banner">
<p></p>
</div>
<div id="chain-logo-container">
<input type="file" id="logo-input" accept=".png,.svg,.jpeg,.gif,.jpg,.txt" />
<div id="chain-logo"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="/public/js/chain.js"></script>
</body>
div 的 CSS：
#chain-logo {
border-radius: 20px;
height: 200px;
width: 260px;
background-image: url("/public/images/chain-default.svg");
background-size: 260px 200px;
}
感谢 StackSlave 提出这个想法！
我能够通过将代码更改为以下内容来解决我的问题：
// updates logo
let requestNum = 0;
function updateLogo(chain) {
fetch(`/api/chain/${chainId}/data`)
.then(response => response.json())
.then(data => {
$("#chain-logo").css("background-image", `url("/api/images/chain/${chainId}?requestNum=${requestNum}")`);
});
}
每次调用 updateLogo 函数时，我都会将 requestNum 加 1，这样每次的 url 都会不同。
| 归档时间： |
|
| 查看次数： |
62 次 |
| 最近记录： |