post #4199
Trocando Imagem da Pagina pelo Usuário Usando Javascript
Publicado em: 25/01/2024 / Atualizado em: 04/02/2024
Com este código abaixo, é possível deixar o seu usuário alterar as imagens do site com apenas um clique. Neste caso, você só precisa deixar todas as tags de imagem que são trocáveis dentro de id="editableSection"
<div id="editableSection">
<img class="editableImage" style="width: 200px" src="https://bruno.art.br/link-da-imagem.png">
<img class="editableImage" style="width: 200px" src="https://bruno.art.br/link-da-imagem.png">
<img class="editableImage" style="width: 200px" src="https://bruno.art.br/link-da-imagem.png">
</div>
<script>
var images = document.querySelectorAll('.editableImage');
images.forEach(function(image) {
image.addEventListener('click', function() {
var input = document.createElement('input');
input.type = 'file';
input.accept = 'image/*';
input.addEventListener('change', function() {
var file = input.files[0];
if (file) {
var reader = new FileReader();
reader.onload = function(e) {
image.src = e.target.result;
};
reader.readAsDataURL(file);
}
});
input.click();
});
});
</script>Publicações recomendadas:
Link Direto
Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link direto abaixo. Basta copiar.
bruno.art.br/?p=4199
ID de Referência: 4199
Sugira uma publicação
Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.