Limitar o formato do arquivo ao usar <input type = "file">?

Gostaria de restringir o tipo de arquivo que pode ser escolhido no seletor de arquivos do SO nativo quando o usuário clica no botão Procurar no <input type="file">elemento em HTML. Tenho a sensação de que é impossível, mas eu gostaria de saber se há é uma solução. Eu gostaria de manter apenas HTML e JavaScript; sem flash, por favor.

A rigor, a resposta é não . Um desenvolvedor não pode impedir que um usuário faça upload de arquivos de qualquer tipo ou extensão.

Ainda assim, o atributo de aceitação de <input type = "file">pode ajudar a fornecer um filtro na caixa de diálogo de seleção de arquivo do sistema operacional. Por exemplo,

<!-- (IE 10+, Edge (EdgeHTML), Edge (Chromium), Chrome, Firefox 42+) -->
<input type="file" accept=".xls,.xlsx" />

deve fornecer uma maneira de filtrar arquivos que não sejam .xls ou .xlsx. Embora a página MDN para o inputelemento sempre tenha dito que suporta isso, para minha surpresa, isso não funcionou para mim no Firefox até a versão 42. Isso funciona no IE 10+, Edge e Chrome.

Portanto, para oferecer suporte ao Firefox com mais de 42 anos, juntamente com o IE 10+, Edge, Chrome e Opera, acho melhor usar a lista de tipos MIME separados por vírgula:

<!-- (IE 10+, Edge (EdgeHTML), Edge (Chromium), Chrome, Firefox) -->
<input type="file"
 accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" /> 

Comportamento [ Edge (EdgeHTML): o menu suspenso do filtro de tipo de arquivo mostra os tipos de arquivo mencionados aqui, mas não é o padrão no menu suspenso. O filtro padrão é All files (*).]

Você também pode usar asteriscos nos tipos MIME. Por exemplo:

<input type="file" accept="image/*" /> <!-- all image types --> 
<input type="file" accept="audio/*" /> <!-- all audio types --> 
<input type="file" accept="video/*" /> <!-- all video types --> 

O W3C recomenda que os autores especifiquem os tipos MIME e as extensões correspondentes no acceptatributo. Portanto, a melhor abordagem é:

<!-- Right approach: Use both file extensions and corresponding MIME-types. -->
<!-- (IE 10+, Edge (EdgeHTML), Edge (Chromium), Chrome, Firefox) -->
<input type="file"
 accept=".xls,.xlsx, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" /> 

JSFiddle do mesmo: aqui .

Referência: lista de tipos MIME

IMPORTANTE: O uso do acceptatributo fornece apenas uma maneira de filtrar os arquivos dos tipos que são de interesse. Os navegadores ainda permitem que os usuários escolham arquivos de qualquer tipo. Verificações adicionais (do lado do cliente) devem ser feitas (usando JavaScript, uma maneira seria essa ), e definitivamente os tipos de arquivo DEVEM ser verificados no servidor , usando uma combinação de tipo MIME usando a extensão de arquivo e sua assinatura binária ( ASP .NET , PHP , Ruby , Java ). Você também pode consultar essas tabelas para tipos de arquivos e seus números mágicos, para executar uma verificação mais robusta do lado do servidor.

Aqui estão três boas leituras sobre upload de arquivos e segurança.

EDIT: Talvez a verificação do tipo de arquivo usando sua assinatura binária também possa ser feita no lado do cliente usando JavaScript (em vez de apenas olhar para a extensão) usando a API de arquivos HTML5, mas ainda assim, o arquivo deve ser verificado no servidor, porque um usuário mal-intencionado ainda poderá fazer o upload de arquivos fazendo uma solicitação HTTP personalizada.

Existe o atributo de aceitação para a tag de entrada. No entanto, não é confiável de forma alguma. Os navegadores provavelmente o tratam como uma "sugestão", o que significa que o usuário, dependendo do gerenciador de arquivos, também terá uma pré-seleção que exibe apenas os tipos desejados. Eles ainda podem escolher "todos os arquivos" e enviar o arquivo que quiserem.

Por exemplo:

<form>
    <input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />
</form>

Leia mais na especificação HTML5

Lembre-se de que ele deve ser usado apenas como uma "ajuda" para o usuário encontrar os arquivos corretos. Todo usuário pode enviar qualquer solicitação que desejar para o seu servidor. Você sempre tem que validar tudo do lado do servidor.

Portanto, a resposta é: não, você não pode restringir , mas pode definir uma pré-seleção, mas não pode confiar nela.

Alternativamente ou adicionalmente, você pode fazer algo semelhante, verificando o nome do arquivo (valor do campo de entrada) com JavaScript, mas isso não faz sentido porque não oferece proteção e também não facilita a seleção para o usuário. Isso apenas potencialmente induz um webmaster a pensar que ele está protegido e abre uma brecha na segurança. Pode ser um problema para usuários que possuem extensões de arquivo alternativas (por exemplo, jpeg em vez de jpg), maiúsculas ou nenhuma extensão de arquivo (como é comum nos sistemas Linux).

Você pode usar o changeevento para monitorar o que o usuário seleciona e notificá-lo nesse ponto de que o arquivo não é aceitável. Ele não limita a lista real de arquivos exibidos, mas é o mais próximo possível do lado do cliente, além do acceptatributo com suporte insuficiente .

var file = document.getElementById('someId');

file.onchange = function(e) {
  var ext = this.value.match(/\.([^\.]+)$/)[1];
  switch (ext) {
    case 'jpg':
    case 'bmp':
    case 'png':
    case 'tif':
      alert('Allowed');
      break;
    default:
      alert('Not allowed');
      this.value = '';
  }
};

<input type="file" id="someId" />

JSFiddle

Sim você está certo. É impossível com HTML. O usuário poderá escolher o arquivo que desejar.

Você pode escrever um código JavaScript para evitar o envio de um arquivo com base em sua extensão. Mas lembre-se de que isso não impedirá que um usuário mal-intencionado envie qualquer arquivo que ele / ela realmente deseja.

Algo como:

function beforeSubmit()
{
    var fname = document.getElementById("ifile").value;
    // check if fname has the desired extension
    if (fname hasDesiredExtension) {
        return true;
    } else {
        return false;
    }
}

Código HTML:

<form method="post" onsubmit="return beforeSubmit();">
    <input type="file" id="ifile" name="ifile"/>
</form>

Tecnicamente, você pode especificar o acceptatributo (alternativo em html5 ) no inputelemento, mas ele não é suportado corretamente.

Usar inputtag com acceptatributo

<input type="file" name="my-image" id="image" accept="image/gif, image/jpeg, image/png" />

Clique aqui para obter a tabela de compatibilidade do navegador mais recente

Demonstração ao vivo aqui

Para selecionar apenas arquivos de imagem, você pode usar este accept="image/*"

<input type="file" name="my-image" id="image" accept="image/*" />

Demonstração ao vivo aqui

Somente gif, jpg e png serão mostrados, captura de tela da versão 44 do Chrome

Eu sei que isso é um pouco tarde.

function Validatebodypanelbumper(theForm)
{
   var regexp;
   var extension =     theForm.FileUpload.value.substr(theForm.FileUpload1.value.lastIndexOf('.'));
   if ((extension.toLowerCase() != ".gif") &&
       (extension.toLowerCase() != ".jpg") &&
       (extension != ""))
   {
      alert("The \"FileUpload\" field contains an unapproved filename.");
      theForm.FileUpload1.focus();
      return false;
   }
   return true;
}

Na verdade, você poderia fazê-lo com javascript, mas lembre-se de que js é do lado do cliente; portanto, você estaria "alertando os usuários" sobre o tipo de arquivo que eles podem enviar, se você quiser EVITAR (restringir ou limitar o que disse) certos tipos de arquivos que DEVE faça do lado do servidor.

Veja este tutorial básico se você deseja iniciar a validação no servidor. Para todo o tutorial, visite esta página .

Boa sorte!

Conforme mencionado nas respostas anteriores, não podemos restringir o usuário a selecionar arquivos apenas para determinados formatos de arquivo. Mas é realmente útil usar a tag de aceitação no atributo de arquivo em html.

Quanto à validação, temos que fazê-lo no lado do servidor. Também podemos fazer isso no lado do cliente em js, mas não é uma solução infalível. Precisamos validar no lado do servidor.

Para esses requisitos, eu realmente prefiro a estrutura de desenvolvimento de aplicativos Web struts2 Java. Com seu recurso de upload de arquivos embutido, o upload de arquivos para aplicativos da Web baseados no struts2 é muito fácil. Apenas mencione os formatos de arquivo que gostaríamos de aceitar em nosso aplicativo e todo o resto é tratado pelo próprio núcleo da estrutura. Você pode conferir no site oficial do struts.

Eu posso sugerir o seguinte:

• Se você precisar fazer com que o usuário selecione qualquer arquivo de imagem por padrão, use accept = "image / *"

  <input type="file" accept="image/*" />

• se você deseja restringir a tipos de imagem específicos, use accept = "image / bmp, image / jpeg, image / png"

  <input type="file" accept="image/bmp, image/jpeg, image/png" />

• se você deseja restringir a tipos específicos, use accept = ". bmp, .doc, .pdf"

  <input type="file" accept=".bmp, .doc, .pdf" />

• Você não pode restringir o usuário a alterar o arquivador de arquivos para todos os arquivos; portanto, sempre valide o tipo de arquivo no script e no servidor