Comment masquer le champ de texte dans Html File Upload ?

Question

Je me demande comment masquer le champ de texte d'une balise html standard de téléchargement de fichiers.

par exemple

<input type="file" name="somename" size="chars"> 

Cela génère évidemment un champ de texte et, à côté de ce champ, un bouton de navigation... Je veux cacher la partie champ de texte mais garder le bouton.

Answer 1

Cela fonctionnera sûrement, je l'ai utilisé dans mes projets, j'espère que cela vous aidera :)

<input type="file" id="selectedFile" style="display: none;" />
<input type="button" value="Browse..." onclick="document.getElementById('selectedFile').click();" />

Answer 2

Je recommanderais de masquer l'ensemble et de mettre un objet bouton séparé qui, lorsqu'il est cliqué, finira par cliquer sur le bouton de navigation de l'entrée.

Vous pouvez le faire avec CSS et javascript -- consultez cet article (en fait, c'est la deuxième fois que j'utilise cette référence aujourd'hui).

Answer 3

La méthode la plus simple, qui n'est mentionnée dans aucune réponse, consisterait à utiliser un fichier de type label pour le input .

<input type="file" name="myFile" id="myFile">
<label for="myFile">Choose your file</label>

input[type="file"] { display: none; }

Utilisation de label sera utile car cliquer sur l'étiquette revient à cliquer sur l'entrée. Cela ne fonctionnera que si l'entrée id est égal à celui de l'étiquette for attribut.

Answer 4

Vous pouvez mettre une image comme arrière-plan pour le bouton. Cela a fonctionné pour moi, il y a quelque temps.

Answer 5

Le site file Le bouton d'entrée est extrêmement difficile à styliser et à manipuler, principalement pour des raisons de sécurité.

Si vous avez vraiment besoin de personnaliser votre bouton de téléchargement, je recommande un téléchargeur basé sur Flash comme SWFUpload o Uploadify qui vous permet d'utiliser une image personnalisée comme bouton, d'afficher une barre de progression, et d'autres choses encore.

Cependant, sa philosophie de base diffère de la simple intégration d'un contrôle dans un formulaire. Le processus de téléchargement se déroule séparément. Vérifiez d'abord si cela fonctionne pour vous.