post

Upload Temporário de Imagens (usando Base64) com Javascript

Publicado em: 25/01/2024

Categorias: BlogJavaScriptJS

Se você está precisando criar um sistema para fazer o upload temporário de imagens, ou um sistema que permita que o próprio usuário troque a imagem de uma determinada seção da página, esse código pode te ajudar.

Este código basicamente eu criei para utilizar em um sistema de assinatura on-line, onde a empresa podia editar as informações da assinatura inclusive trocar a imagem do perfil do funcionário.

Desse jeito, o próprio funcionário podia fazer a edição da sua assinatura de e-mail, e adicionar a sua foto de perfil, sem a necessidade de um servidor que hospedasse as imagens que usuário fizesse o upload.

Pois esse sistema não é conectado a nenhum banco de dados, e quando usuário realizar o app longe da imagem o sistema não salva a imagem, mas sim, converte a imagem em um formato chamado Base64.

<div>
    <p>Sua imagem vai aparecer aqui:</p>
    <div id="container-perfil" class="esconder-container-perfil">
        <img src="" alt="Imagem" id="minha-imagem">
    </div>
    <p><input type="file" id="fileInput" accept="image/*"></p>
</div>

<script>
  // Adiciona um evento para permitir a troca de imagens
  document.getElementById('fileInput').addEventListener('change', function(e) {
      var file = e.target.files[0];
      var containerPerfil = document.getElementById('container-perfil');
  
      if (file) {
          var reader = new FileReader();
  
          reader.onload = function (readerEvent) {
              // Atualiza a imagem com o novo conteúdo
              document.getElementById('minha-imagem').src = readerEvent.target.result;
  
              // Remove a classe para exibir a div do perfil
              containerPerfil.classList.remove('esconder-container-perfil');
          };
  
          // Lê o conteúdo da imagem como uma URL de dados
          reader.readAsDataURL(file);
      } else {
          // Adiciona a classe para ocultar a div do perfil se nenhum arquivo for selecionado
          containerPerfil.classList.add('esconder-container-perfil');
      }
  });
</script>

<style>
  .esconder-container-perfil {
      display: none;
  }

  #minha-imagem {
    max-width: 200px;
    height: auto;
  }
</style>

Logo acima, disponibilizei todo o código para que você possa realizar os testes. Sendo assim, você pode modificar o código para se adaptar ao seu sistema.


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

ID de Referência: 4195

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