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

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:

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.
O javascript valida apenas a extensão do arquivo, mas não pode realmente verificar se o arquivo selecionado é um jpg ou png real.
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

5

você pode usar o acceptatributo para <input type="file">ler estes documentos http://www.w3schools.com/tags/att_input_accept.asp

— yussan
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