javascript - ¿Cómo hacer que jQuery limite los tipos de archivos en la subida?

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

Respuesta #1

Puedes obtener el valor de un campo de archivo al igual que cualquier otro campo. Sin embargo, no puedes modificarlo.

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

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

Respuesta #2

No es necesario ningún complemento solo para esta tarea. Armé esto a partir 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 como deshabilitado a menos y hasta que se seleccione un tipo de archivo válido.

Respuesta #3

Podrías 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 necesitas: http://docs.jquery.com/Plugins/Validation/Methods/accept#extension

Tenga en cuenta que controlar la extensión de un archivo no es infalible, ya que de ninguna manera está relacionado con el tipo MIME del archivo. Así que podría tener un .png que sea un documento de Word y un .doc que sea una imagen .png perfectamente válida. Así que no olvide hacer más controles del lado del servidor ;)

Respuesta #4

Para el front-end es bastante conveniente poner el atributo 'accept' si estás usando 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 explorador de archivos según el navegador.

Respuesta #5

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