3

Meu formulário tem um campo input file, e gostaria de limitar o tipo de arquivo a selecionar somente imagens e pdf.

<form>
<input type='file' required>
<input type='submit' name='Enviar'>
</form>

Estou tratando o tipo de arquivo no back-end, mas gostaria de limitar o tipo de arquivo a ser selecionado no front-end.

2 Respostas 2

6

Basta usar o accept:

<form action="/action_page.php">
  <input type="file" name="pic" accept="image/*">
  <input type="submit">
</form> 

Para determinar o tipo, precisa conhecer um pouco sobre Mime-Types. No exemplo acima, qualquer imagem serve.

Poderia ter usado image/jpeg, por exemplo, se quisesse restringir mais.

Conforme respondido pelo @DVD, no seu caso a sintaxe é essa:

<input type='file' required accept="image/*, application/pdf">

Separando por vírgula os tipos desejados.

Exemplos básicos:

text/plain
text/html
image/jpeg
image/png
audio/mpeg
audio/ogg
audio/*
video/mp4
application/octet-stream

Saiba mais sobre os Mime-Types aqui:

https://developer.mozilla.org/pt-BR/docs/Web/HTTP/Basico_sobre_HTTP/MIME_types

2
  • Redondo, valeu pela ajuda!
    – ElvisP
    8/04/2018 às 23:34
  • @DVD eu acho válido restaurar a sua.
    – Square Obama
    8/04/2018 às 23:37
0

Para aceitar imagens e PDF, você pode incluir no atributo accept os dois mime-types separados por vírgula:

accept="image/*, application/pdf"

Então seu input ficaria assim:

<input type='file' required accept="image/*, application/pdf">

Teste:

<form>
<input type='file' required accept="image/*, application/pdf">
<input type='submit' name='Enviar'>
</form>

2
  • vc quer que eu remova a minha resposta e vc corrige a sua? Posso fazer isso como sinal de consideração.
    – Meu ovo
    8/04/2018 às 23:32
  • Não precisa não. Foi só uma observação pra deixar claro que eu noto isso, já removi. Inclusive, a sua está mais completa, então não vou criar caso. Aliás, se derem negativo, tenha certeza que nao sou eu (sério, eu fico P da vida com sacanagem, mas negativo em coisa boa nao é comigo)
    – Square Obama
    8/04/2018 às 23:33

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 .