Cómo hacer que jQuery restrinja los tipos de archivos al subir?

No es necesario ningún plugin para esta tarea. Improvisado esto junto a un par de otros guiones:

$('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 = '';
    }
});

El truco aquí es establecer el botón de carga en desactivado a menos y hasta que se seleccione un tipo de archivo válido.

Puedes usar el plugin de validación para jQuery: http://docs.jquery.com/Plugins/Validation

Sucede que tiene una regla accept() que hace exactamente lo que necesita: http://docs.jquery.com/Plugins/Validation/Methods/accept#extension

Tenga en cuenta que el control de la extensión del archivo no es a prueba de balas, ya que no está relacionado de ninguna manera con el tipo mime del archivo. Así que podrías tener una .png que es un documento de Word y una .doc es una imagen PNG perfectamente válida. Así que no olvídate de hacer más controles del lado del servidor;)

¿No quieres comprobar más bien en MIME que en cualquier extensión que el usuario está mintiendo? Si es así, entonces es menos de una línea:

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

Para el front-end es bastante conveniente poner el atributo 'accept' si está utilizando un campo de archivo.

Ejemplo:

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

Un par de notas importantes:

• El atributo accept es compatible con Internet Explorer 10, Firefox, Opera, Chrome y Safari 6.
• Mostrará el texto para la extensión de archivo de manera diferente en el diálogo del explorador de archivos de diferentes navegadores.

Para mi caso utilicé los siguientes códigos:

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

Intento escribir un ejemplo de código de trabajo, lo pruebo y todo funciona.

Hare es el 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
    }
}

Este código funciona bien, pero el único problema es que si el formato del archivo es diferente de las opciones especificadas, muestra un mensaje de alerta pero muestra el nombre del archivo mientras que debería descuidarlo.

$('#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 ejemplo solo permite cargar imágenes 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>

Si estás tratando con múltiples cargas de archivos (html 5), tomé el comentario sugerido y lo modificé un poco:

    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!');

        }
    }

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

Aquí hay un código simple para la validación de javascript, y después de validarlo limpiará el archivo 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("");
    }
}