Question

我在我的html文件中

<div class="change">
            <div id="changed" onclick="change_DImage()">New Upload...</div>
            <input id="browse" type="file" onchange="ImagLoc()">
</div>

这是在javascript文件中

function change_DImage(){
          document.getElementById("browse").click();  
    }
function ImagLoc(){
          var x = (document.getElementById("browse").value).toString();
          var ImgId = x.substr(12,6);
          var NewImg = "url('./image/MyAlbum/" + ImgId + "')";
          document.getElementById("dailyPic").style.backgroundImage = NewImg;
}

它工作得很好但是当我刷新浏览器时它会改回默认值

在css文件中

background-image: url("../image/smokebird.jpg");

Answer 1

Javascript操纵Html的唯一当前状态，而不是服务器端的文件。要处理它，您必须在服务器端存储状态，并在按钮单击时将其更改为客户端和服务器端。

在浏览器的Cookie或本地存储中存储更改的值，并在页面加载中存储一个是另一种选择。

Answer 2

在页面重新加载时，显然图像将重置为原始图像。要在页面刷新后保持原样，你可以做到，

以Cookie（基本64格式）保存图像，但由于您只能保存小尺寸图像，因此存在尺寸限制。
在图像选择上，您可以异步（使用AJAX）将图像文件远程保存在服务器上，并且可以使用服务器会话调用图像。

Answer 3

localStorage示例：jsfiddle

但是，localStorage可以由用户轻松清除，即使是错误的。我发现这个答案对如何清理它很有用：SO link。其他缺点（如果你真的关心它）是需要使用内联样式。有attr css function但content以外的用途目前有限，因此我会坚持使用内联样式。
我做了更容易理解的版本，包括你的代码，这里： jsfiddle，但是我不确定这行和函数假设这样做我已经将其删除了：

<div id="changed" onclick="change_DImage()">New Upload...</div>

修改显然第二个jsfiddle代码不适用于jsfiddle，你需要将它注入你的代码。

使用javascript

3 个答案: