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

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>

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

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.

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?

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]);
};

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.

<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

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.

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.