restringir a seleção de upload de arquivo para tipos específicos

De qualquer forma para restringir a seleção de tipos de arquivos através do elemento ?

Por exemplo, se eu quisesse que apenas os tipos de imagens fossem enviados, eu restringiria as possíveis seleções para (image / jpg, imagem / gif, imagem / png), e a checkbox de diálogo de seleção deixaria de fora os arquivos de outros tipos MIME.

ps Eu sei que eu posso fazer isso após o fato com a API do arquivo, digitalizando os atributos .type. Estou realmente tentando restringir isso antes da mão .. Eu também sei que posso fazer isso via flash, mas eu não quero usar flash para isso.

Existe um atributo html para essa finalidade específica chamado accept mas ele tem pouco suporte nos navegadores. Por causa desta validação do lado do servidor é recomendado em vez disso.

  

Se você não tem access ao backend, dê uma olhada em uma solução baseada em flash como o SWFUpload .

Veja mais sobre isso aqui: Entrada de arquivo ‘accept’ atributo – é útil?

É melhor permitir que o usuário selecione qualquer arquivo e, em seguida, verifique seu tipo – isso é melhor suportado pelos navegadores:

 var file = (el[0].files ? el[0].files[0] : el[0].value || undefined), supportedFormats = ['image/jpg','image/gif','image/png']; if (file && file.type) { if (0 > supportedFormats.indexOf(file.type)) { alert('unsupported format'); } else { upload(); } } 

Você também pode verificar o tamanho do arquivo usando a propriedade file.size.