JavaScript: Preview de imagem no formulário HTML
Veja a imagem adicionada ao form usando JavaScript facilmente e manipule-a
Vou começar falando o porquê usar essa funcionalidade no seu site, mas se você quiser usar o código, já o deixarei aqui embaixo, então pode pegar, apressadinho.
Javascript
// pega a tag img, já que só tem uma, você pode usar um id pra pegar
var imagem = document.querySelector('img')
// é o input da imagem ._.
var input_imagem = document.querySelector('#input_imagem')
// é o span com o nome da imagem, pode ser opcional
var nome_imagem = document.querySelector('#nome_imagem')
// esse é importante, quando o usuário abre o input ele perde a imagem, com isso ele consegue voltar a imagem original sem erros, você pode colocar o caminho direto se quiser
var caminho_original = imagem.getAttribute('src')
// é o texto que está no span com o nome que ficará a imagem, quando o usuário abre a imagem e o input perde o texto que guarda o nome da imagem volta ao original
var nome_imagem_original = nome_imagem.innerHTML
input_imagem.addEventListener('change', function()
{
let reader = new FileReader()
// verifica se o input não tem uma imagem ou se o arquivo não é uma imagem, geralmente ocorre quando o usuário abre e fecha sem selecionar uma imagem
if(input_imagem.files.length <= 0 || input_imagem.files[0].type.match(/([^/]+)(?=\/)/)[0] != "image")
{
input_imagem.value = null
nome_imagem.innerHTML = nome_imagem_original
imagem.src = caminho_original
return
}
reader.onload = function ()
{
imagem.src = reader.result
nome_imagem.innerHTML = input_imagem.files[0].name
}
reader.readAsDataURL(input_imagem.files[0])
})
HTML
<div class="form">
<h1>Preview de imagem no form</h1>
<form action="" enctype="multipart/form-data" method="post">
<label for="input_imagem">
<img src="profile.png" alt="">
<span id="nome_imagem">Nome da imagem</span>
</label>
<input type="file" name="imagem" id="input_imagem">
<input type="submit" value="ENVIAR">
</form>
</div>
Agora que os apressados já pegaram o que queriam, vou explicar como usar, por que usar e algumas recomendações.
Usar essa funcionalidade traz uma aparência profissional ao site, e é uma prática muito utilizada hoje em dia em diversos sites. Como os sites mais famosos fazem isso, por que não fazer? Além disso, traz uma melhor visualização para o usuário e até mesmo avisos antes do envio do formulário sobre a imagem.
Esse código utiliza a função FileReader(), que é uma API que permite ler arquivos diretamente do navegador e manipulá-los na memória do navegador. Vocês podem pesquisar mais se desejarem.
Nessas linhas:
Javascript
if(input_imagem.files.length <= 0 || input_imagem.files[0].type.match(/([^/]+)(?=\/)/)[0] != "image")
Na primeira condição, verifica-se se há uma imagem no input. Quando o usuário abre o input e não seleciona uma imagem, o código quebraria. Vocês podem atualizar o código e melhorar isso se desejarem que o usuário, ao adicionar uma imagem e abrir novamente, não a remova. Em seguida, verifica-se se o arquivo do input é uma imagem. Vocês também podem adicionar mais funcionalidades, como um aviso caso o arquivo não seja uma imagem. O formato é definido pelo navegador. Se a condição entrar nesse if, o arquivo do input será removido, a tag img terá seu src alterado para a imagem padrão e o texto auxiliar voltará ao seu texto padrão.
Já o responsável pela alteração do texto auxiliar para o nome do arquivo da imagem e pela atualização do src da imagem é esse trecho de código:
Javascript
reader.onload = function ()
{
imagem.src = reader.result
nome_imagem.innerHTML = input_imagem.files[0].name
}
Então chegamos ao fim. Espero que gostem do conteúdo e façam as alterações necessárias. Lembrem-se: nada é perfeito e tudo pode ser melhorado.