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
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;"/>
-
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?– HBretoneCommented 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.– SergioCommented 10/08/2017 às 14:36