post

Trocando Imagem da Pagina pelo Usuário Usando Javascript

Publicado em: 25/01/2024

Categorias: BlogJavaScriptJS

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>


Link de 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 para mim, e sugira alguma publicação de algum tema que tenha dificuldades de resolver.

Clique aqui e entre em contato


Comentários