post

Trocando Imagem da Pagina pelo Usuário Usando Javascript

Publicado em: 25/01/2024 / Atualizado em: 04/02/2024

Categorias: BlogJavaScript (JS)JS

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:


Inscreva-se em Nossa News:

Seja notificando sempre que tiver conteúdo novo disponível no meu canal do Youtube ou artigo no meu Blog.

Bruno Devs News


Link Curto para Compartilhamento

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link curto abaixo. Basta clicar em cima do link para copiar.

bruno.art.br/pb/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.

Clique aqui e entre em contato