Aqui veremos como personalizar o campo de arquivo de um formulário, pre-visualizando uma imagem ao seleciona-la:
See the Pen Personalizar input file com CSS e JS by Álvaro Mecelis (@mecelis) on CodePen.
Iremos usar a técnica de ocultar a caixa de seleção padrão do input file, e iremos usar o <label></label>, pois quando clicamos no elemento ele seleciona o input que estiver dentro, mesmo que oculto.
Note que o elemento img está sem a propriedade de endereço (src) que será atribuída via JS ao selecionar a imagem. Outro detalhe é que ele está dentro do elemento label, desta forma, quando a imagem for exibida, clicando nela irá exibir a janela para selecionar outra imagem.
Nosso HTML ficará assim:
HTML
<form class="form-upload">
<label class="input-personalizado">
<span class="botao-selecionar">Selecione uma imagem</span>
<img class="imagem" />
<input type="file" class="input-file" accept="image/*">
</label>
</form>
No css, o mais importante é setar “display: none” para a classe .input-file que está atribuída ao input file do formulário. Nossa label que está com a classe .input-personalizado e será responsável por abrir a janela de seleção, pode ser personalizada da foma como quiser.
Na classe .imagem, que será responsável por exibir a imagem ao selecionar o arquivo, coloquei o “max-width: 100%”, pois assim independente da resolução que tenha o arquivo, na página, o tamanho será limitado pela largura do form, que neste caso está em 350px.
Nosso css fica assim:
CSS
*{
font-family: sans-serif;
box-sizing:border-box;
color:#FFF;
}
.form-upload{
background:#333;
display: block;
margin: 0 auto;
padding: 20px;
text-align: center;
width: 350px;
}
.input-personalizado{
cursor: pointer;
}
.imagem{
max-width: 100%;
}
.input-file{
display:none;
}
No JS iremos atribuir a classe .imagem à constante previewImg e .input-file à fileChooser. Agora podemos trabalhar em cima do evento onChange do nosso elemento input file.
JS – Java Script
const $ = document.querySelector.bind(document);
const previewImg = $('.imagem');
const fileChooser = $('.input-file');
fileChooser.onchange = e => {
const fileToUpload = e.target.files.item(0);
const reader = new FileReader();
reader.onload = e => previewImg.src = e.target.result;
reader.readAsDataURL(fileToUpload);
};