Question

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

正如我所说，我创建了一个标题元素，并为其提供了背景图像

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)');
    });
});

我已经设置了一个示例JSFiddle。虽然这与我想要做的类似，但我想让用户从他们的计算机中选择图像，而不是改为硬编码图像。所以有点像图片上传选择选项，但在这种情况下我没有上传任何东西。我完成的目标是有一个保存按钮，它将生成这些更新的HTML / CSS文件。

所以我想知道如何让用户选择他们想要替换默认值的图像？

由于

Answer 1

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

引自this question，您可以让客户“上传”他们的图片以便在Javascript中进行操作：


First line...
Second line. read replaced.

然后可能使用base64编码的图像并将其运行到你的后台url参数：

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)在开头包含reader.result内容，但您必须自己尝试一下。

以下是一些阅读材料：

https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL
http://jsfiddle.net/0GiS0/Yvgc2/（工作中的FileReader示例可能很有用）
http://blog.teamtreehouse.com/reading-files-using-the-html5-filereader-api

单击图像选择替换图像

1 个答案: