gpt4 book ai didi

javascript - 如何根据用户输入更改背景图像 | HTML、CSS、JS

转载 作者:行者123 更新时间:2023-11-28 01:00:42 24 4
gpt4 key购买 nike

我已经对如何执行此操作进行了大量研究,但我似乎找不到具体的答案。我试图让用户从他们的计算机输入一个文件,并将该文件变成网页的背景。我的以下代码如下所示:

    <head>
<script>
function changeBackground() {
var input = document.getElementById("background").value;
localStorage.setItem("Background", input);
var result = localStorage.getItem("Background");
$('body').css({ 'background-image': "url(" + result + ")" });
}
</script>
</head>
<body>
<input id="background" type="file" onchange="changeBackground()">
</body>

如果有人可以向我解释我需要做什么才能让它工作,我将非常感激。我已经知道我需要使用 localStorage 来确保记住所选背景,我只是无法更改背景。如果已经有关于如何执行此操作的文章,我将不胜感激。谢谢!

编辑

Nikhil 和 user6003859 向我解释了为什么它不起作用。我想我只需要弄清楚如何使用 Ajax 和 PHP 来更改它。如果有人对此有更多建议,我很想听听。感谢大家帮我解决这个问题。

最佳答案

现代浏览器通常会限制对用户本地文件(在本例中为图像)的访问。您要做的是通过您从 <input type='file' /> 获得的路径显示用户本地文件存储中的图像。值(value)。

您应该做的是将图像上传到您的服务器(可能使用 ajax,因此感觉无缝),然后将文件从您的服务器显示到您的页面上。 p>

编辑:尽管这是一个新问题,但我会给您一个示例,说明如何根据用户提供的 URL 更改元素的背景:

var inp = document.getElementById('inp');
var res = document.getElementById('res');

inp.oninput = function()
{
res.style.backgroundImage = 'url(' + inp.value + ')';
};
div
{
width: 5em;
height: 5em;
}
<input type='text' id='inp' />
<div id='res'>
</div>

关于javascript - 如何根据用户输入更改背景图像 | HTML、CSS、JS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42310128/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com