Controllo totale sui campi di tipo file con jQuery e CSS

Controllo totale sui campi di tipo file con jQuery e CSS

I campi dei form di tipo file sono notoriamente ostici da controllare. Ciò è dovuto al fatto che trattandosi di un'azione potenzialmente pericolosa i browser applicano delle restrizioni al numero di azioni possibili. Ad esempio questi elementi non possono essere nascosti con le dichiarazioni CSS display: none o visibility: hidden perché in quel caso i browser disabilitano sia l'invio tramite JavaScript del form sia l'evento click associato al campo. Tuttavia esiste una soluzione anche in questo caso.

Partiamo dalla seguente struttura HTML:


<form id="upload" action="" method="post" enctype="multipart/form-data">
	<div>
		<button id="choose">Scegli</button>
		<span id="filename"></span>
		<input type="file" name="file" id="file" multiple="false" />
		<input type="submit" name="upload-file" value="Upload" />
	</div>
</form>

Quello che vogliamo fare è trasferire l'azione principale di scelta del file dal campo di tipo file al bottone usando l'elemento con ID filename per mostrare il nome del file scelto. Per prima cosa nascondiamo il campo file con i CSS:


#file {
	width: 1px;
	height: 1px;
	display: block;
	opacity: 0;
}

Quindi definiamo il seguente codice jQuery:


var $choose = $( "#choose" ),
	$filename = $( "#filename" ),
	$file = $( "#file" );
	
	$choose.on( "click", function() {
		// Apro la finestra di scelta del file
		
		$file.click();
	});
	
	$file.on( "change", function() {
		// Mostro il nome del file scelto
		
		var name = $( this ).val();
		$filename.text( name );
	});

Come si può notare si tratta di una tecnica molto semplice da implementare.

Torna su