jQuery: validare le estensioni dei file prima dell'upload

Validare le estensioni dei file con jQuery non è un'operazione eccessivamente complessa.

Partiamo da questo form per l'upload di immagini:

<form action="" method="post" enctype="multipart/form-data" id="upload-form">
	<div class="file-wrap">
		<span id="file-wrap-text"></span>
		<input type="file" id="media" name="media" />
	</div>		
</form>	

Possiamo quindi usare questo codice jQuery:

var Uploader = function( form, options ) {
        this.form = $( form );
        this.options = $.extend({
            text: "#file-wrap-text", // Contiene il nome del file
            file: "#media" // Input di tipo file
        }, options);

        if( this.form.length ) {
            this.init();
        }
    };

    Uploader.prototype = {
        init: function() {
            this.selectFile();
        },
        selectFile: function() {
            var allowed = /(\.jpg|\.jpeg|\.png|\.gif|\.bmp)$/i; // Estensioni ammesse
            var self = this;

            $( self.options.file).on( "change", function() {
               var value = $( this).val();
               var name = self._getFileName( value ); // Nome del file con estensione
               if( allowed.test( name ) ) {
                   $( self.options.text ).removeClass( "text-danger bg-danger").text( name );
               } else {
                   $( self.options.text ).addClass( "text-danger bg-danger").text( "Only images" );
               }
            });

        },
        _getFileName: function( str ) {
            var name = "";
            var sep = "";
            if( str.indexOf( "\\" ) != -1 ) {
                sep = "\\";
            } else if( str.indexOf( "/" ) != -1 ) {
                sep = "/";
            } else {
                sep = "";
            }

            var parts = str.split( sep );
            name = parts[parts.length - 1];
            return name;
        }
    };

Esempio d'uso:

$(function() {
	var $uploader = new Uploader( "#upload-form" );
});