Quante volte ti sei trovato davanti il pulsante HTML di input di tipo “file”, con la scritta “Scegli file…”, e non trovavi nessun modo per cambiare la sua estetica con le comuni regole CSS?
Questa tipologia di elemento, in una pagina HTML, è uno di quelli che trova difficile integrazione con il resto della pagina. Quando crei un tema o progetti lo stile di una pagina con CSS, input type=”file” sarà il tuo peggior nemico, difficile da gestire e da modificare sotto tutti i punti di vista (in ambito prettamente estetico).
Esistono alcune tecniche con le regole di stile CSS per adeguarlo al resto degli elementi, ma a mio parere non sempre si riesce ad ottenere un buon risultato.
Per nostra esperienza, quando si ha a che fare con “input file“, detto anche “pulsante Sfoglia“, è meglio agire in maniera differente, come vedremo qui di seguito.
Detto brevemente, invece di cambiare lo stile di questo elemento, la cosa più conveniente è nasconderlo e sostituirlo con un comune pulsante <button>, che eseguirà il medesimo compito.
A prima vista, questo sistema può sembrare complicato ad un occhio inesperto, ma in realtà richiede meno e una quantità di codice inferiore piuttosto che modificare direttamente il CSS del pulsante “Sfoglia” o “Scegli file“.
Prima di iniziare la spiegazione del codice, vorrei mostrarti il risultato finale qui in basso, per testare tu stesso il funzionamento di questa tecnica:
N.B. Con la nostra guida, il pulsante “[Scegli file…] Nessun file selezionato” NON verrà mostrato.
Come puoi ben vedere, entrambi i pulsanti eseguono la ricerca di file all’interno del tuo dispositivo. Ma non farti ingannare, l’elemento “button” HTML (quello verde) servirà a sostituire l’elemento “input” graficamente, ma non sostituirà la sua funzione, poiché con JavaScript il click sul pulsante verde “reindirizzerà” la richiesta al “tasto sfoglia” reale.
(è più facile mostrarlo che spiegarlo).
Senza troppi giri di parole, qui il codice HTML:
<input type="file" id="myfile" style="display:none;">
<button >Ora esaminando il codice HTML, possiamo capire che il click sul <button> equivale al click su <input type=”file”>. Questo grazie all’evento “onclick” JavaScript e a getElementById().click().
Con questa sostituzione, gli utenti non visualizzeranno più il classico pulsante “Scegli file…“, che verrà nascosto con la regola CSS display:none, ma un pulsante creato ad hoc per l’occasione (con tanto di stile CSS), che si integrerà maggiormente con il resto della pagina.
Per funzionare il pulsante dovrà simulare l’evento “click” sull’elemento input, per questo motivo scriveremo una breve funzione con JavaScript accompagnata dall’evento “onclick“.
Questa semplice funzione potrà portare enormi benefici al vostro tema e allo stile del sito, senza scendere a compromessi come spesso accade sull’elemento input file in HTML. Inoltre ci permette di nascondere e posizionare il tag input ovunque nella pagina HTML e senza vincoli, poiché ad eseguire il compito al posto suo ci penserà il <button> (utile per creare menu e richiamare elementi da un modulo <form>).
Può essere riadattato anche in altre situazioni e con differenti eventi JavaScript, senza troppe complicazioni.
Iscriviti alla nostra Newsletter qui e seguici su Facebook per aggiornamenti!
Articoli recenti:
Mostra commenti
Gentile Simone, mi chiamo Santo La Rosa e programmo dal 1963 (allora veramente i programmi erano dei veri e propri circuiti montati su pannelli), tuttavia le novità e le difficoltà sono sempre dietro l'angolo. Mi scusi, mi lascio sempre andare. In file HTML ho un Tuttavia ho deciso di lavorare su un file ben determinato: pensavo di poter variare il nome del file in input con il Javascript, dove ho creato una var excel_file nella quale implemento id_excel_file. Credo di capire che in excel_file esistono vari elementi: posso cambiarne solo il nome? Potrebbe indicarmi come? Grazie. Santo.
Gentile Simone, mi chiamo Santo La Rosa e programmo dal 1963 (allora veramente i programmi erano dei veri e propri circuiti montati su pannelli), tuttavia le novità e le difficoltà sono sempre dietro l’angolo. Mi scusi, mi lascio sempre andare. In un file HTML ho un input type="file" id="id_excel_file". Tuttavia ho deciso di lavorare su un file ben determinato: pensavo di poter variare il nome del file in input con lo Script, dove ho creato una var excel_file nella quale implemento id_excel_file. Credo di capire che in excel_file esistono vari elementi insieme al nome del file: posso cambiare solo il nome del file? Potrebbe indicarmi come? Grazie. Santo. Mi scusi per la duplicazione ma erano saltate parti importanti.
Buongiorno Sig. La Rosa. La ringrazio per averci contattato.
Da quanto ho capito dal suo messaggio (mi corregga se sbaglio), ha necessità di cambiare nome del file di input[type=file].
Può farlo in 2 modi:
Prima dell'effettivo upload, quindi dopo la selezione del file, ma prima dell'invio del modulo (form). Utilizzando in questo caso solo JavaScript.
In questo modo è un po' macchinoso, poiché si dovrebbe eseguire una sorta di duplicazione del file selezionato, impostando un nuovo nome.
//vecchio file
var file = document.getElementById("id_excel_file").files[0];
//nuovo file
var NewFile = new File([file], "NuovoNomeFile.xls", {
type: file.type,
});
//provare ora a sostituire il file o usarlo su un nuovo input
Per ora non ho avuto modo di verificare questo sistema. Se le interessa posso approfondire e magari fare un articolo dedicato.
La seconda opzione è la più comune con PHP, qui si procede dopo l'invio del modulo/form, si prende il file e si cambia il nome prima di caricarlo sul server:
if(isset($_FILE['file'])){
$nuovoNomeFile = "MioFile.xls";
move_uploaded_file($_FILES["file"]["tmp_name"], "../img/imageDirectory/" .$nuovoNomeFile);
}
Spero di esserle stato di aiuto.