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);
    };