1

Estou com um campo para upload em um formulário HTML, gostaria de saber se é possível colocar uma thumb pré-definida, com uploads de imagens sei que da para fazer uma thumb exibindo a imagem que está sendo colocada, mas por exemplo, caso seja upado um arquivo PDF da para colocar um ícone do PDF, de forma que sempre que um arquivo no formato PDF for selecionado apareça um mesmo ícone e o nome do arquivo embaixo?

1 Resposta 1

1

Sim é possivel, basta verificares a extenção do ficheiro, existe até uma propriedade type para isso. Por exemplo:

const icons = {
  'application/msword': 'http://icons.iconarchive.com/icons/blackvariant/button-ui-ms-office-2016/128/Word-2-icon.png',
  'application/pdf': 'http://icons.iconarchive.com/icons/alecive/flatwoken/128/Apps-Pdf-icon.png',
  'image/png': 'http://icons.iconarchive.com/icons/hopstarter/soft-scraps/128/Image-PNG-icon.png'
}

const input = document.querySelector('input');
const image = document.querySelector('img');
input.addEventListener('change', function() {
  const tipo = this.files[0].type;
  image.src = icons[tipo];
});
<input type="file" />
<img src="" style="display: block;"/>

2
  • Funcionou bem, mas como posso fazer para o ícone aparecer em vários arquivos, por exemplo estou utilizando upload múltiplo, no caso o ícone só aparece uma vez, se forem 5 arquivos teria que aparecer 5 ícones, sabe como posso fazer isso?
    – HBretone
    Commented 10/08/2017 às 14:33
  • 1
    @HenriqueBretone nesse caso em ves de usar somente this.files[0] trata como uma array e pega no .type de cada elemento dessa array.
    – Sergio
    Commented 10/08/2017 às 14:36

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .