HTML: Como limitar o upload de arquivos para serem apenas imagens?

126

Com o HTML, como limite o tipo de arquivo que pode ser carregado?

Para facilitar a experiência do usuário, desejo limitar o upload de arquivos a serem apenas imagens (jpeg, gif, png).

<form method="post" action="..." enctype="multipart/form-data">
<label for="image">Photo</label>
<input name="image" type="file" />
</form>
JacobT
fonte
Obviamente, para proteger isso corretamente - eu verificaria o back-end / servidor. Mas tudo o que estou procurando é uma maneira de simplesmente a experiência do usuário, para que, quando clicarem em "procurar" para encontrar a imagem que desejam enviar, não precisem ver todos os documentos do Word, etc. Upload
JacobT 13/10/09
Não sei se você pode definir uma máscara de arquivo. Eu nunca vi isso feito com sucesso.
Robert K

Respostas:

230

HTML5 diz <input type="file" accept="image/*">. Obviamente, nunca confie na validação do lado do cliente: sempre verifique novamente no lado do servidor ...

Ms2ger
fonte
87

A entrada do arquivo HTML5 possui atributo de aceitação e também vários atributos. Usando vários atributos, você pode fazer upload de várias imagens em uma instância.

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

Você também pode limitar vários tipos de mímica.

<input type="file" multiple accept='image/*|audio/*|video/*' >

e outra maneira de verificar o tipo mime usando o objeto file.

O objeto de arquivo fornece nome, tamanho e tipo.

var files=e.target.files;

var mimeType=files[0].type; // You can get the mime type

Você também pode restringir o usuário para que alguns tipos de arquivos sejam carregados pelo código acima.

Konga Raju
fonte
4
image/*|audio/*|video/*não funciona para mim, deve ser separados por vírgula que parece:image/*,video/mp4,.txt
serg
Ótimo para verificar o mimeType! Tx!
Pedro Ferreira
6

Editado

Se as coisas eram como deveriam ser, você poderia fazer isso através do atributo "Aceitar".

http://www.webmasterworld.com/forum21/6310.htm

No entanto, os navegadores praticamente ignoram isso, então isso é irrelavante. A resposta curta é: não acho que exista uma maneira de fazer isso em HTML. Você teria que verificar no lado do servidor.

A postagem anterior a seguir contém algumas informações que podem ajudá-lo com alternativas.

Atributo de entrada 'aceitar' do arquivo - é útil?

David
fonte
6

Aqui está o HTML para o upload de imagens. Por padrão, ele mostra arquivos de imagem apenas na janela de navegação, porque nós colocamos accept="image/*". Mas ainda podemos alterá-lo no menu suspenso e ele mostra todos os arquivos. Portanto, a parte Javascript valida se o arquivo selecionado é ou não uma imagem real.

 <div class="col-sm-8 img-upload-section">
     <input name="image3" type="file" accept="image/*" id="menu_images"/>
     <img id="menu_image" class="preview_img" />
     <input type="submit" value="Submit" />
 </div> 

Aqui no evento de mudança, primeiro verificamos o tamanho da imagem. E na segunda ifcondição, verificamos se é ou não um arquivo de imagem.

this.files[0].type.indexOf("image")será -1se não for um arquivo de imagem.

document.getElementById("menu_images").onchange = function () {
    var reader = new FileReader();
    if(this.files[0].size>528385){
        alert("Image Size should not be greater than 500Kb");
        $("#menu_image").attr("src","blank");
        $("#menu_image").hide();  
        $('#menu_images').wrap('<form>').closest('form').get(0).reset();
        $('#menu_images').unwrap();     
        return false;
    }
    if(this.files[0].type.indexOf("image")==-1){
        alert("Invalid Type");
        $("#menu_image").attr("src","blank");
        $("#menu_image").hide();  
        $('#menu_images').wrap('<form>').closest('form').get(0).reset();
        $('#menu_images').unwrap();         
        return false;
    }   
    reader.onload = function (e) {
        // get loaded data and render thumbnail.
        document.getElementById("menu_image").src = e.target.result;
        $("#menu_image").show(); 
    };

    // read the image file as a data URL.
    reader.readAsDataURL(this.files[0]);
};
Vineesh Puttanisseri
fonte
Adicione explicação por favor.
Paul Swetz
Por favor, note que o acima requer jquery, mas não diz isso. Fácil o suficiente para descobrir, mas útil para declarar. Eu criei um violino para isso . Ele faz algumas outras coisas (conforme necessário para um projeto), mas o conceito é praticamente o mesmo.
Dave Terra
1

Você só pode fazer isso com segurança no lado do servidor. O uso do atributo "accept" é bom, mas também deve ser validado no servidor para que os usuários não possam fazer cursagem no seu script sem essa limitação.

Sugiro que você: descarte qualquer arquivo que não seja de imagem, avise o usuário e exiba novamente o formulário.

Robert K
fonte
1
<script>

    function chng()
    {
        var typ=document.getElementById("fiile").value;
        var res = typ.match(".jp");

        if(res)
        {
            alert("sucess");
        }
        else
        {
            alert("Sorry only jpeg images are accepted");
            document.getElementById("fiile").value="; //clear the uploaded file
        }
    }

</script>

Agora na parte html

<input type="file" onchange="chng()">

esse código verificará se o arquivo enviado é um arquivo jpg ou não e restringe o upload de outros tipos

Arun Prabhakaran P
fonte
Essa verificação é anulada por uma simples renomeação da extensão do arquivo. Você deve pelo menos verificar o tipo de URI de dados se quiser fazer algo assim.
21418 Lucas Leblanc
0

Por fim, o filtro que é exibido na janela Procurar é definido pelo navegador. Você pode especificar todos os filtros que deseja no atributo Aceitar, mas não tem garantia de que o navegador do usuário adira a ele.

Sua melhor aposta é fazer algum tipo de filtragem no back-end no servidor.

John Lechowicz
fonte
0

Faça o checkout de um projeto chamado Uploadify. http://www.uploadify.com/

É um carregador de arquivos baseado em Flash + jQuery. Isso usa a caixa de diálogo de seleção de arquivos do Flash, que permite filtrar tipos de arquivos, selecionar vários arquivos ao mesmo tempo, etc.

AndrewR
fonte
30
Flash? ... de jeito nenhum!
precisa saber é o seguinte
14
Pior solução de todos os tempos.
Matteo Mosconi
1
Gente, não vejo por que é a pior solução de todos os tempos. Embora seja verdade que o Flash vai desaparecer, ele ainda está sendo usado por navegadores antigos - muito antigos, ok, mas ainda está sendo usado - e esta solução possui dois tipos de tecnologias: jQuery + HTML5 e Flash fallback. É tão bom quanto o VideoJS, que possui um substituto do Flash, caso o navegador não consiga reproduzir o vídeo ... Eu não testei a solução, ela pode não ser a melhor, mas os votos negativos não são justos.
Unapedra
1
+1 bobo para votar. O flash está indo embora, mas tem um bom retorno. O que você acha que o Google usa para o gmail para fallback de soquete? Boba.
Jason Sebring
8
Esta resposta tem 4 anos. Naquela época, o suporte HTML5 para seleção de vários arquivos ou filtragem da janela de seleção de arquivos pelos tipos aceitos não era bem suportado em nenhum dos principais navegadores. Essa era uma solução que teria funcionado para muitos na época, mas eu passaria para uma solução HTML5 pura agora.
AndrewR