Qual è il modo migliore per sostituire il pulsante Sfoglia file in HTML?
Domanda
So che è possibile sostituire il pulsante Sfoglia, che viene generato in HTML, quando si utilizza il tag input
con type = " file
.
Non sono sicuro di quale sia il modo migliore, quindi se qualcuno ha esperienza con questo, per favore, contribuisci.
Soluzione
Il modo migliore è rendere invisibile il controllo di input del file quasi (dandogli un'opacità molto bassa - non fare " visibilità: nascosto " oppure " ; display: none ") e posiziona assolutamente qualcosa sotto di esso - con un indice z inferiore.
In questo modo, il controllo effettivo non sarà visibile e tutto ciò che ci metti sotto lo mostrerà. Ma poiché il controllo è posizionato sopra quel pulsante, acquisirà comunque gli eventi click (questo è il motivo per cui vuoi usare l'opacità, non la visibilità o la visualizzazione - i browser rendono l'elemento non cliccabile se li usi per nasconderlo).
Questo articolo approfondisce la tecnica.
Altri suggerimenti
Ai browser non piace davvero che si scherzi con gli input di file, ma è possibile farlo. Ho visto un paio di tecniche, ma la più semplice è posizionare in modo assoluto l'input del file su qualsiasi cosa tu voglia usare come pulsante e impostarne l'opacità su zero o quasi zero. Ciò significa che quando l'utente fa clic sull'immagine (o su qualunque cosa tu abbia lì sotto), in realtà sta facendo clic sul pulsante Sfoglia invisibile.
Ad esempio:
<input type="file" id="fileInput">
<img src="...">
#fileInput{
position: absolute;
opacity: 0;
-moz-opacity: 0;
filter: alpha(opacity=0);
}
Se non ti dispiace usare javascript, puoi impostare l'opasità dell'input del file su 0, posizionare il controllo con lo stile in alto tramite z-index e inviare eventi di click dal tuo pulsante all'input del file. Vedi qui per la tecnica: http://www.quirksmode.org/dom/inputfile.html
Questo non è tecnicamente possibile per motivi di sicurezza, quindi l'utente non può essere indotto in errore.
Tuttavia, ci sono un paio di soluzioni alternative: dai un'occhiata a http: // www. quirksmode.org/dom/inputfile.html per un esempio.
Per la cronaca, questa domanda è già stata posta qui (dove ho dato la stessa risposta).
Puoi utilizzare un uploader Flash come SWFupload per fare anche questo.