¿Cómo hacer que jQuery restrinja los tipos de archivos en la carga?

Me gustaría que jQuery limite un campo de carga de archivos a solo jpg / jpeg, png y gif. Ya estoy haciendo una comprobación de backend PHP. Ya estoy ejecutando mi botón de envío a través de una JavaScriptfunción, así que realmente solo necesito saber cómo verificar los tipos de archivo antes de enviar o alertar.

Puede obtener el valor de un campo de archivo igual que cualquier otro campo. Sin embargo, no puedes alterarlo.

Entonces, para verificar superficialmente si un archivo tiene la extensión correcta, puede hacer algo como esto:

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

No es necesario un complemento solo para esta tarea. Cobbleed esto de un par de otros 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 = '';
    }
});

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

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

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

Tenga en cuenta que controlar 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. Entonces podría tener un .png que es un documento de Word y un .doc que es una imagen png perfectamente válida. Así que no olvide hacer más controles del lado del servidor;)

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 cuadro de diálogo del navegador de archivos de diferentes navegadores.

¿No quieres comprobar más en MIME que en cualquier medida en que mienta el usuario? Si es así, es menos de una línea:

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

para mi caso usé 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.

Liebre es 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 a las opciones especificadas, muestra un mensaje de alerta pero muestra el nombre del archivo mientras 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 permite cargar solo 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á tratando con múltiples cargas de archivos (html 5), tomé el comentario sugerido y lo modifiqué 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!');

        }
    }

    $("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;
    }

Aquí hay un código simple para la validación de JavaScript, y después de que valide, 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("");
    }
}