Como ter o jQuery restringir os tipos de arquivo no upload?

Gostaria que o jQuery limite um campo de upload de arquivo para apenas jpg / jpeg, png e gif. Já estou fazendo verificação de back-end PHP. Já estou executando meu botão de envio por meio de uma JavaScriptfunção, então só preciso saber como verificar os tipos de arquivo antes de enviar ou alertar.

Você pode obter o valor de um campo de arquivo da mesma forma que qualquer outro campo. Você não pode alterá-lo, no entanto.

Portanto, para verificar superficialmente se um arquivo tem a extensão correta, você pode fazer algo assim:

var ext = $('#my_file_field').val().split('.').pop().toLowerCase();
if($.inArray(ext, ['gif','png','jpg','jpeg']) == -1) {
    alert('invalid extension!');
}

Nenhum plug-in é necessário apenas para esta tarefa. Cobbled isso juntos de alguns outros scripts:

$('INPUT[type="file"]').change(function () {
    var ext = this.value.match(/\.(.+)$/)[1];
    switch (ext) {
        case 'jpg':
        case 'jpeg':
        case 'png':
        case 'gif':
            $('#uploadButton').attr('disabled', false);
            break;
        default:
            alert('This is not an allowed file type.');
            this.value = '';
    }
});

O truque aqui é definir o botão de upload como desativado, a menos e até que um tipo de arquivo válido seja selecionado.

Você pode usar o plug-in de validação para jQuery: http://docs.jquery.com/Plugins/Validation

Acontece que existe uma regra accept () que faz exatamente o que você precisa: http://docs.jquery.com/Plugins/Validation/Methods/accept#extension

Observe que o controle da extensão do arquivo não é à prova de balas, pois não está relacionado ao tipo de mimet do arquivo. Assim, você pode ter um .png que é um documento do word e um .doc que é uma imagem png perfeitamente válida. Portanto, não se esqueça de fazer mais controles do lado do servidor;)

Para o front-end, é bastante conveniente colocar ' accept o atributo ' ' se você estiver usando um campo de arquivo.

Exemplo:

<input id="file" type="file" name="file" size="30" 
       accept="image/jpg,image/png,image/jpeg,image/gif" 
/>

Algumas notas importantes:

• O atributo de aceitação é suportado no Internet Explorer 10, Firefox, Opera, Chrome e Safari 6.
• Ele mostrará o texto da extensão do arquivo de maneira diferente na caixa de diálogo do navegador de arquivos de diferentes navegadores.

Não deseja verificar mais o MIME do que qualquer extensão que o usuário esteja mentindo? Nesse caso, é menos de uma linha:

<input type="file" id="userfile" accept="image/*|video/*" required />

para o meu caso, usei os seguintes códigos:

    if (!(/\.(gif|jpg|jpeg|tiff|png)$/i).test(fileName)) {              
    alert('You must select an image file only');               
    }

Eu tento escrever um exemplo de código de trabalho, testo e tudo funciona.

Hare é código:

HTML:

<input type="file" class="attachment_input" name="file" onchange="checkFileSize(this, @Model.MaxSize.ToString(),@Html.Raw(Json.Encode(Model.FileExtensionsList)))" />

Javascript:

 //function for check attachment size and extention match
function checkFileSize(element, maxSize, extentionsArray) {
    var val = $(element).val(); //get file value

    var ext = val.substring(val.lastIndexOf('.') + 1).toLowerCase(); // get file extention 
    if ($.inArray(ext, extentionsArray) == -1) {
        alert('false extension!');
    }

    var fileSize = ($(element)[0].files[0].size / 1024 / 1024); //size in MB
    if (fileSize > maxSize) {
        alert("Large file");// if Maxsize from Model > real file size alert this
    }
}

Esse código funciona bem, mas o único problema é que, se o formato do arquivo for diferente das opções especificadas, ele exibirá uma mensagem de alerta, mas exibirá o nome do arquivo enquanto o deveria negligenciar.

$('#ff2').change(
                function () {
                    var fileExtension = ['jpeg', 'jpg', 'pdf'];
                    if ($.inArray($(this).val().split('.').pop().toLowerCase(), fileExtension) == -1) {
                        alert("Only '.jpeg','.jpg','.pdf' formats are allowed.");
                        return false; }
});

Este exemplo permite carregar apenas imagem PNG.

HTML

<input type="file" class="form-control" id="FileUpload1" accept="image/png" />

JS

$('#FileUpload1').change(
                function () {
                    var fileExtension = ['png'];
                    if ($.inArray($(this).val().split('.').pop().toLowerCase(), fileExtension) == -1) {
                        alert("Only '.png' format is allowed.");
                        this.value = ''; // Clean field
                        return false;
                    }
                });

<form enctype="multipart/form-data">
   <input name="file" type="file" />
   <input type="submit" value="Upload" />
</form>
<script>
$('input[type=file]').change(function(){
    var file = this.files[0];
    name = file.name;
    size = file.size;
    type = file.type;
    //your validation
});
</script>

Se você está lidando com vários uploads de arquivos (html 5), peguei o comentário sugerido principal e modifiquei-o um pouco:

    var files = $('#file1')[0].files;
    var len = $('#file1').get(0).files.length;

    for (var i = 0; i < len; i++) {

        f = files[i];

        var ext = f.name.split('.').pop().toLowerCase();
        if ($.inArray(ext, ['gif', 'png', 'jpg', 'jpeg']) == -1) {
            alert('invalid extension!');

        }
    }

    $("input[name='btnsubmit']").attr('disabled', true);
    $('input[name="filphoto"]').change(function () {
    var ext = this.value.match(/\.(.+)$/)[1];
    switch (ext) 
    {
    case 'jpg':
    case 'jpeg':
    case 'png':
    case 'bmp':
        $("input[name='btnsubmit']").attr('disabled', false);
    break;
    default:
        alert('This is not an allowed file type.');
        $("input[name='btnsubmit']").attr('disabled', true);
        this.value = '';

function validateFileExtensions(){
        var validFileExtensions = ["jpg", "jpeg", "gif", "png"];
        var fileErrors = new Array();

        $( "input:file").each(function(){
            var file = $(this).value;
            var ext = file.split('.').pop();
            if( $.inArray( ext, validFileExtensions ) == -1) {
                fileErrors.push(file);
            }
        });

        if( fileErrors.length > 0 ){
            var errorContainer = $("#validation-errors");
            for(var i=0; i < fileErrors.length; i++){
                errorContainer.append('<label for="title" class="error">* File:'+ file +' do not have a valid format!</label>');
            }
            return false;
        }
        return true;
    }

Aqui está um código simples para validação de javascript e, após a validação, ele limpará o arquivo de entrada.

<input type="file" id="image" accept="image/*" onChange="validate(this.value)"/>

function validate(file) {
    var ext = file.split(".");
    ext = ext[ext.length-1].toLowerCase();      
    var arrayExtensions = ["jpg" , "jpeg", "png", "bmp", "gif"];

    if (arrayExtensions.lastIndexOf(ext) == -1) {
        alert("Wrong extension type.");
        $("#image").val("");
    }
}