Javascript 用图像选择替换单击时的图像

我已经建立了一个带有基本标题的小模板。我试图做一些类似于拖放网站建设，但在这种情况下，布局将是相同的，只是内容的变化

正如我所说，我已经创建了一个header元素并给它一个背景图像

header {
  width: 100%;
  height: 200px;
  background: url(https://pearsonified.com/theme/neoclassical/wp-content/themes/neoclassical/headers/header_2.jpg) center center no-repeat;
  background-size: cover;
}

要让图像在单击时更改，我可以执行以下操作

$(function() {
    $('#header').click(function() {
     $(this).css('background', 'url(https://pearsonified.com/theme/neoclassical/wp-content/themes/neoclassical/headers/header_1.jpg)');
    });
});

我树立了一个榜样。虽然这与我想做的类似，但我希望允许用户从计算机上选择图像，而不是更改为硬编码图像。所以有点像一个图像上传选择选项，但在这种情况下，我不上传任何东西。我的目标是在完成时有一个保存按钮，它将生成这些更新的HTML/CSS文件

所以我想知道我该如何允许用户选择他们想要用什么图像替换默认图像

---

谢谢

你想做的事很棘手。这里有一个可能的解决方案

如中所述，您可以让客户端“上传”其图像，以便在Javascript中进行操作：

我假设

reader.result

包含

数据：base64；图像/（键入），

开头的东西，但你必须自己试验一下

以下是一些阅读材料：

• （例如，FileReader正在工作，可能很有用）

---

你想做的事情很棘手。这里有一个可能的解决方案
如中所述，您可以让客户端“上传”其图像，以便在Javascript中进行操作：
我假设

reader.result

包含

数据：base64；图像/（键入），

开头的东西，但你必须自己试验一下
以下是一些阅读材料：

• （例如，FileReader正在工作，可能很有用）

---

你在说什么样的“更新”？您是否希望访问您网站的每个人都能看到新图像？如果是这样的话，您认为如果不以这种或那种方式将图像上传到web服务器，该如何工作？因此，基本上是在用户选择文件时进行图像预览。类似这样的事情？不希望对每个访问该网站的人都进行更新，只对该网站上的人进行更新。因此，这将位于舞台服务器上。然后我访问它，点击图片并将其更改为我自己的图片。然后我会有一个保存按钮，下载更新的源代码。下一个访问的人会看到原稿。你在说什么样的“更新”？您是否希望访问您网站的每个人都能看到新图像？如果是这样的话，您认为如果不以这种或那种方式将图像上传到web服务器，该如何工作？因此，基本上是在用户选择文件时进行图像预览。类似这样的事情？不希望对每个访问该网站的人都进行更新，只对该网站上的人进行更新。因此，这将位于舞台服务器上。然后我访问它，点击图片并将其更改为我自己的图片。然后我会有一个保存按钮，下载更新的源代码。下一个访问的人将看到原件。

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            document.getElementById('blah').src =  e.target.result;
        }

        reader.readAsDataURL(input.files[0]);
    }
}

And the HTML:

        <input type='file' id="imgInp" onchange="readURL(this);" />
        <img id="blah" src="#" alt="your image" />

background:url(data:base64;image/jpg,IMAGINE_BASE64_JIBBERISH_HERE)