post
Upload Temporário de Imagens (usando Base64) com Javascript
Publicado em: 25/01/2024 / Atualizado em: 04/02/2024
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.

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.