jQuery: validare le estensioni dei file per l'upload

Uploadare un file con jQuery: tema inflazionato, ma sempre interessante. Altrettanto interessante è la domanda: come faccio a validare l'estensione di un file consentendo che solo alcuni tipi di file siano validi per l'upload? Risposta: usando le espressioni regolari. Prima però di vedere l'esempio concreto è bene soffermarci un istante su come i browser trattano il valore di un campo di tipo file. Vediamo insieme i dettagli.

Ciascun campo di un form ha una proprietà value associata. In jQuery possiamo utilizzare il metodo val() sia per leggere che per scrivere valori su questa proprietà.

Nel caso di un campo di tipo file, il valore sarà il nome del file uploadato. Questo nome può essere registrato sia insieme al percorso assoluto del file sul computer che da solo. In ogni caso il nome terminerà sempre con l'estensione del file, ossia come file.estensione.

Quindi la nostra espressione regolare dovrà tenere conto della presenza del carattere punto e dell'estensione alla fine della stringa del valore del campo. Se ad esempio volessimo ammettere solo file di testo scriveremmo:

var txt = /\.txt$/;

Il modificatore $ indica che la selezione del pattern dovrà partire dalla fine della stringa. Qualora volessimo ammettere più file dovremmo semplicemente usare il modificatore | per fornire delle alternative:

var multiple = /\.txt|pdf$/;

Ecco il nostro esempio concreto:

var Validator = {

    elements: {
        file: $('#file').val()
    },

    validate: {
        file: function() {
            if (Validator.elements.file == '' || !/\.txt$/.test(Validator.elements.file)) {
                Validator.errorMsg('File not allowed.', '#file');

                return false;
            }

            return true;
        }
    },

    errorMsg: function(msg, element) {
        $('<span class="error"/>').
        text(msg).
        insertAfter(element);
    },

    init: function() {

        $('#test').submit(function(e) {

            if ($('.error').length) {
                $('.error').remove();
            }

            var valid = Validator.validate.file();

            if (!valid) {

                e.preventDefault();

            }



        });
    }
};

Validator.init();​

Potete visionare l'esempio finale in questa pagina.