Corsi on-line

Campi input “file” customizzati con jQuery e CSS

Chiunque abbia mai progettato un form per l’upload sa quanto sia complesso (per non dire impossibile) stilizzare il campo di selezione file – <input type=”file” /> – che consente all’utente di selezionare dal proprio HD i files da inviare al servizio remoto.
Questo particolare campo input, infatti, è molto poco malleabile ed anche con un sapiente uso dei CSS è difficile plasmarne l’aspetto.
In questo breve tips vedremo, quindi, come è possibile sostituire il campo input “file” con un bottone, un’immagine o un qualsiasi testo. In pratica non faremo altro che nascondere il vero campo di selezione file mostrando, al suo posto, un bottone o un link che, una volta cliccato, “passerà l’evento” al campo input invisibile all’utente (che potrà, così, svolgere il suo lavoro).

Per fare tutto ciò utilizzeremo, semplicemente, un pizzico di CSS ed una riga di codice Javascript (jQuery).

Per prima cosa vediamo la struttura HTMl del nostro form:

<form>
...
<input type="file" id="upload"/>
<input type="button" value="Carica un File" id="btn"/> 
...
</form>

Di seguito il codice CSS (che nasconde il campo input file)

input#upload {
  display: block;
  visibility: hidden;
  width: 0;
  height: 0;
}

Per finire un pizzico di jQuery:

$('#btn').click(function(){
  $('#upload').click();
});​

Il risultato sarà un form bello pulito e stilizzato… in quanto il bottone per l’upload (quello visibile all’utente, intendo) potrà essere stilizzato esattamente come ogni altro elemento del vostro modulo.

Post correlati
  • Roverto77

    Ciao se questo script lo utilizzo su IE quando vado a fare il submit invece di inviare i dati, mi cancella la selezione del file dal campo hidden. Sugli altri browser funziona perfettamente.
    Come si può risolvere?

I più letti del mese
Tematiche