Restringindo Tipos de Arquivos no <input type="file">: Um Guia
Resumo Rápido
Para garantir que o <input type="file"> aceite apenas determinados tipos de arquivos, defina o atributo accept.
<input type="file" accept=".jpg, .png"/>Isso fará com que a caixa de diálogo de seleção de arquivos exiba apenas arquivos nos formatos .jpg e .png.
Mergulho Profundo no Atributo accept
O atributo accept da tag <input> atua como um filtro na caixa de diálogo de seleção de arquivos, indicando ao navegador quais tipos de arquivos podem ser carregados. Embora não forneça validação robusta, o atributo accept ajuda os usuários a selecionar arquivos nos formatos especificados corretamente.
Extensões de Arquivos e Tipos MIME
O atributo accept suporta tanto extensões de arquivos específicas quanto tipos MIME.
<input type="file" accept="image/*"/> <!-- Aceita qualquer tipo de imagem -->
<input type="file" accept=".png"/> <!-- Aceita apenas arquivos png -->Vantagens de Usar Tipos MIME
Usar tipos MIME melhora a compatibilidade entre diferentes navegadores. Um tipo MIME inclui um tipo e um subtipo, separados por uma barra (por exemplo, application/pdf), e é geralmente mais confiável do que usar apenas extensões de arquivos (".pdf").
Aceitando Vários Tipos de Arquivos
Você pode adicionar uma lista de tipos de arquivos ao atributo accept, separando-os por vírgulas. Tanto extensões quanto tipos MIME podem ser especificados simultaneamente.
<!-- Permite selecionar arquivos png e gif, bem como todas as outras imagens -->
<input type="file" accept=".png, .gif, image/*"/>Impacto da Ordem dos Tipos
A ordem dos tipos no atributo accept pode afetar a seleção padrão de arquivos: por exemplo, a prioridade é dada à extensão de arquivo se ela preceder "image/*".
Considerando Tipos MIME para Formatos de Escritório
Ao considerar diferentes versões de software, como o MS Office, é comum incluir tanto os formatos novos quanto legados para simplificar o upload de arquivos para todos os usuários.
Testando em Diferentes Navegadores
Diferentes navegadores podem interpretar extensões de arquivos de maneira diferente; por exemplo, o Firefox pode não reconhecê-las completamente. Portanto, é essencial realizar testes em vários navegadores para garantir um comportamento consistente e previsível.
Validação no Lado do Servidor para Confiabilidade
O atributo accept do lado do cliente pode ser contornado, então, para garantir a validação dos tipos de arquivos, é importante implementar verificações do lado do servidor também.
Visualização
<input type="file"> atua como um filtro para tipos de arquivos:
| Tipos de Arquivos Permitidos | Filtro de Tipo de Arquivo |
|---|---|
| .jpg | ✔ |
| .png | ✔ |
| .txt | ✖ |
| .exe | ✖ |
Exemplo de configuração de um filtro com o atributo accept:
<!-- Configurando o filtro -->
<input type="file" accept=".jpg, .png, .pdf"/>Este filtro permitirá apenas arquivos com extensões .jpg, .png e .pdf.
Personalizando Seus Filtros de Tipo de Arquivo
Como Encontrar um Tipo MIME
Para encontrar o tipo MIME a ser utilizado, consulte o Registro de Tipos de Mídia da IANA. Erros na nomeação de tipos MIME podem confundir a funcionalidade do filtro.
Permitindo Seleções Múltiplas de Arquivos
Adicione o atributo multiple à tag <input> se você quiser permitir que os usuários selecionem vários arquivos ao mesmo tempo.
<input type="file" accept=".jpg, .png" multiple/>Padrão Universal
Para permitir a aceitação de arquivos de qualquer tipo, use o valor "/" no atributo accept caso não haja necessidade de restrições de formato.
Determinando o Tipo MIME com JavaScript
Com a API de Arquivos do navegador, você pode determinar o tipo MIME de um arquivo para validação adicional no lado do cliente, mas lembre-se de que isso não substitui a validação no lado do servidor.
document.getElementById('fileInput').onchange = function(e) {
const file = e.target.files[0];
const mimeType = file.type;
// Verifique se o tipo de arquivo atende aos requisitos
};