Qual è il modo migliore per sostituire il pulsante Sfoglia file in HTML?

StackOverflow https://stackoverflow.com/questions/108149

  •  01-07-2019
  •  | 
  •  

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.

È stato utile?

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.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top