点击图片选择

替换图像我已经设置了一个带有基本标题的小模板。我正在尝试制作类似于拖放网站的东西，但在这种情况下，布局将相同，只是内容发生更改。点击图片选择

正如我说的，我已经创建了一个头元素，并赋予它一个背景图像

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文件。

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

谢谢

来源

2016-12-01 kate_hudson

什么样的“更新”是你的国王关于？您是否期望访问您网站的每个人都能看到新图片？如果是这样，那么如果不以这种或那种方式将图像上传到Web服务器，您认为这会起作用吗？ – CBroe

所以基本上是用户选择文件时的图像预览。像这样的一个http://jsfiddle.net/danialfarid/maqbzv15/1118/？ – iamdevlinph

不期望为访问该网站的每个人提供更新，仅限网站上的人员。所以这将坐在舞台服务器上。然后我访问它，点击图片并将其改为我自己的图片。然后我将有一个保存按钮，下载更新后的源代码。下一位访问者将看到原件。 –

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

由于从this question报价，你都不可能有客户端“上传”在Javascript他们的操作键图像：

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" />

然后可能使用base64编码的图像，并运行它变成你的背景链接参数：

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

我会假设，reader.result包含在开始data:base64;image/(type),的东西，但ÿ你必须自己试验一下。

下面是一些阅读材料：

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

来源

2016-12-02 03:15:46 HelpingHand

点击图片选择

回答

相关问题