Como permitir que <input type = "file"> aceite apenas arquivos de imagem?

376

Preciso fazer upload apenas do arquivo de imagem através <input type="file"> tag.

No momento, ele aceita todos os tipos de arquivos. Mas, eu quero limitar a extensões de arquivo de imagem única específicas que incluem .jpg, .gifetc.

Como posso conseguir essa funcionalidade?

html kbvishnu
fonte
Qual é a tecnologia usada no servidor?
precisa
11
kbvishnu, talvez você possa reconsiderar a resposta que aceitou há muito tempo. Você não precisa aceitar outra resposta. Estou apenas sugerindo, com base no número de sinalizadores que recebemos na resposta e seu nível de votos em comparação com outras respostas, que talvez você deva considerar pelo menos aceitá-la.
Aaron Hall

Respostas:

943

Use o atributo de aceitação da marca de entrada. Portanto, para aceitar apenas PNGs, JPEGs e GIFs, você pode usar o seguinte código:

<input type="file" name="myImage" accept="image/x-png,image/gif,image/jpeg" />
Expandir snippet

Ou simplesmente:

<input type="file" name="myImage" accept="image/*" />
Expandir snippet

Observe que isso fornece apenas uma dica para o navegador sobre quais tipos de arquivos exibir para o usuário, mas isso pode ser facilmente contornado, portanto, você sempre deve validar o arquivo carregado no servidor também.

Ele deve funcionar no IE 10+, Chrome, Firefox, Safari 6+, Opera 15+, mas o suporte é muito superficial em celulares (a partir de 2015) e, segundo alguns relatórios, isso pode realmente impedir que alguns navegadores móveis enviem qualquer coisa, então certifique-se de testar bem suas plataformas de destino.

Para suporte detalhado ao navegador, consulte http://caniuse.com/#feat=input-file-accept

risadas loucas
fonte
@madcap accept="file/csv, file/xls"é válido ??
KNU
19
Você tem certeza que é image/x-png? De acordo com esta lista, é justo image/png. iana.org/assignments/media-types/media-types.xhtml
Micros
6
Essa deve ser a resposta selecionada! Falta apenas uma nota dizendo que você ainda precisa verificar o lado do servidor (por causa do navegador não compatível, mas também por segurança)
Erdal G.
11
Provavelmente funcionou quando a resposta foi a resposta, mas apenas tentei e não funcionou para a FF. Eu só precisava adicionar accept = ". Png, .jpg, .jpeg" Por exemplo: jsfiddle.net/DiegoTc/qjsv8ay9/4
Diego
11
Não confie nele completamente. Também pode aceitar outros arquivos facilmente. Você só precisa alterar o tipo de arquivo permitido na janela aberta.
163

Usando isto:

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

funciona no FF e no Chrome.

Tyilo
fonte
14
A aceitar atributo não é uma ferramenta de validação, todos os envios devem ser validados no servidor, sempre ...
TlonXP
11
ainda não é suportado no navegador nativo do Android, mas funciona em outros bem, eu acho caniuse.com/#feat=input-file-accept
mcy
Eu gosto dessa solução, porque no prompt do arquivo o menu suspenso tipo mostra "Arquivos de imagem".
coesos
Tenha cuidado com isso, pois ele permite SVGs, que você pode não querer.
21418
Isso permitirá o máximo de arquivos de imagem .png, .jpg, .jpeg, .gif, .bmp, .ico, .tiff, .svg, .ai, .psp, .pcd, .pct, .raw. Portanto, é melhor mencionar o tipo especificamente.
Thamarai T
76

Use-o assim 

<input type="file" accept=".png, .jpg, .jpeg" />

Funcionou para mim

https://jsfiddle.net/ermagrawal/5u4ftp3k/

Er. Mohit Agrawal
fonte
Isso não funciona no iOS 12. O usuário ainda pode escolher o vídeo no dispositivo.
user3160227
29

Etapas:
1. Adicione o atributo de aceitação à tag de entrada
2. Valide com javascript
3. Adicione a validação do lado do servidor para verificar se o conteúdo é realmente um tipo de arquivo esperado

Para HTML e javascript:

<html>
<body>
<input name="image" type="file" id="fileName" accept=".jpg,.jpeg,.png" onchange="validateFileType()"/>
<script type="text/javascript">
    function validateFileType(){
        var fileName = document.getElementById("fileName").value;
        var idxDot = fileName.lastIndexOf(".") + 1;
        var extFile = fileName.substr(idxDot, fileName.length).toLowerCase();
        if (extFile=="jpg" || extFile=="jpeg" || extFile=="png"){
            //TO DO
        }else{
            alert("Only jpg/jpeg and png files are allowed!");
        }   
    }
</script>
</body>
</html>

Explicação:

  1. O atributo de aceitação filtra os arquivos que serão exibidos no pop-up do seletor de arquivos. No entanto, não é uma validação. É apenas uma dica para o navegador. O usuário ainda pode alterar as opções no pop-up.
  2. O javascript valida apenas a extensão do arquivo, mas não pode realmente verificar se o arquivo selecionado é um jpg ou png real.
  3. Portanto, você deve escrever para a validação do conteúdo do arquivo no lado do servidor.
Surya Kameswara Rao Ravi
fonte
11
resposta mais completa
paranoidhominid
27

Isso pode ser alcançado por

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

Mas esse não é um bom caminho. você precisa codificar no servidor para verificar ou não uma imagem no arquivo.

Verifique se o arquivo de imagem é uma imagem real ou imagem falsa

if(isset($_POST["submit"])) {
    $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
    if($check !== false) {
        echo "File is an image - " . $check["mime"] . ".";
        $uploadOk = 1;
    }
    else {
        echo "File is not an image.";
        $uploadOk = 0;
    }
}

Para mais referência, veja aqui

http://www.w3schools.com/tags/att_input_accept.asp
http://www.w3schools.com/php/php_file_upload.asp

Ashok Devatwal
fonte
3

Usando type = "file" e aceite = "image / *" (ou o formato desejado), permita ao usuário escolher um arquivo com formato específico. Mas você deve verificar novamente no lado do cliente, porque o usuário pode selecionar outro tipo de arquivo. Isso funciona para mim.

<input #imageInput accept="image/*" (change)="processFile(imageInput)" name="upload-photo" type="file" id="upload-photo" />

E então, no seu script javascript

processFile(imageInput) {
    if (imageInput.files[0]) {
      const file: File = imageInput.files[0];
      var pattern = /image-*/;

      if (!file.type.match(pattern)) {
        alert('Invalid format');
        return;
      }

      // here you can do whatever you want with your image. Now you are sure that it is an image
    }
  }
Mati Cassanelli
fonte
Esta é a melhor resposta, uma vez que irá verificar se o arquivo é na verdade uma imagem sem exigir que o desenvolvedor especificar todas as extensões diferentes que deseja permitir
Adam Marshall
Eu entendi sua ideia. Esta é uma sintaxe JS válida const file: File = imageInput.files[0];:? Além disso, a atribuição de id à entrada não é feita da maneira convencional.
Ivan P.
De fato, não é JS, é datilografado. O código de bloco foi copiado de um projeto Angular. Se você quiser usá-lo em um arquivo javascript, deverá omitir a definição de tipo (: Arquivo)
Mati Cassanelli 04/04
0

Se você desejar fazer upload de várias imagens de uma só vez, poderá adicionar multipleatributo à entrada. 

upload multiple files: <input type="file" multiple accept='image/*'>
Expandir snippet

JerryGoyal
fonte