web-dev-qa-db-fra.com

Le type d'entrée HTML = "fichier" dans Chrome ne montre pas la zone de texte.

J'ai un problème avec <input type="file" /> dans Chrome - il ne montre pas la zone de texte près du bouton 'parcourir' Quel est le meilleur moyen d'afficher une entrée de fichier standard (zone de texte + bouton) dans Chrome? 

htmlgoogle-chrome
20
AEMLoviji

C'est le comportement par défaut de Google chrome ainsi que de Safari. Lire this blog pour une solution

13
Fraz Sundal

La boîte est là, bien qu’elle ne soit pas conçue… .. Il se peut que ce soit du «mauvais» côté de la fenêtre, mais c’est là.

Juste pour le sujet - mettez une bordure autour - et vous verrez qu’elle est là.

  <input type="file" style="border: solid 1px red">

En outre, après avoir sélectionné un fichier, vous en obtenez le nom.

4
Radagast the Brown

<input type="file"/> a une apparence visuelle différente selon le navigateur. Sur certains navigateurs, il s'agit d'un champ de texte avec un bouton, dans d'autres, il s'agit simplement d'un bouton. Étant donné que l'élément n'est pas très stylé, vous ne pouvez rien y faire.

Si vous voulez vraiment qu'un téléchargement de fichier ait un look/un comportement différent de l'implémentation par défaut, flash est la voie à suivre. 

Par exemple, de nombreux sites utilisent sfwUpload . Pour une liberté de style totale, vous pouvez le rendre invisible et le placer au-dessus d'un bouton HTML via le positionnement.

Une autre façon de travailler avec les entrées de téléchargement de fichier est de les rendre invisibles via visibility: hidden, de les positionner au-dessus d'autres éléments et de renoncer ainsi à l'utilisation de flash, mais les implémentations sont rarement très jolies, je ne le recommanderais donc pas.

2
Martin Jespersen

L'élément d'entrée de fichier est stylé différemment selon votre navigateur (et probablement le système d'exploitation - je n'ai jamais utilisé que Windows). Si vous regardez la même page avec un élément d’entrée de fichier dans FF, IE et Chrome, celui-ci apparaîtra différemment dans chaque navigateur. 

Pourquoi avez-vous quand même besoin d'afficher la zone de texte? En FF et IE, vous ne pouvez pas taper directement dans ce fichier. La seule utilisation serait donc d’afficher le chemin du fichier sélectionné. ce que Chrome fait déjà pour vous, mais pas dans une boîte.

1
Anthony Grist

J'ai trouvé un lien de quelqu'un d'autre qui avait ce problème, solution ici .

Il ne mentionne pas spécifiquement le chrome, mais Safari fait apparemment la même chose. (Le lien était une réponse acceptée postée dans une discussion chromée)

modifier: wow, la deuxième fois ce matin que je suis sorti sur Google par un autre membre! au moins les questions obtiennent une réponse!

1
j_syk

Vous pouvez remplacer le comportement par défaut et échanger l'apparence du contrôle. Trouvé ceci aujourd'hui en train de chercher comment éditer le css sur fileupload.

1
Steven Mark

Parfois, cela est simplement causé par un code javascript similaire à celui-ci:

function someOnClickHandler(e)
{
    e.preventDefault();  // it kills the file dialog
}

// somewhere:
$('.some-selector-which-contains-the-file-elem').on('click', someOnClickHandler);
0
christian