post

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

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

Categorias: BlogJavaScript (JS)JS

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.

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

ID de Referência: 4195

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