input type="file"

**jul54** · 19/09/2007, 17h37

Bonjour,
je développe une application web sous ASP.NET 2, je souhaite que l'utilisateur puisse allez chercher des photos entre autres présentes sur son disque. J'ai donc rajouter un champ input (type="file") pour récupérer le fichier, je l'upload ensuite, jusqu'ici tout allait bien.

Cependant, je souhaite pouvoir changer le texte du bouton "Parcourir" car l'application est multilingue, j'ai donc trouver la solution suivante sur developpez.com dans la FAQ:

Pour changer le texte d'un bouton de type file, on est obligé de "ruser" car il n'y a pas d'autres moyens.
Voici le script :
<script type="text/javascript">
function getfile(){
document.getElementById('hiddenfile').click();
document.getElementById('selectedfile').value=document.getElementById('hiddenfile').value
}
</script>

Et le corps de votre page:
<body>
<input type="file" id="hiddenfile" style="display:none" />
<input type="text" id="selectedfile" />
<input type="button" value="Select a file" onclick="getfile()" />
</body>

En fait, ce que l'on aperçoit sur la page ressemble à un champ de type File, mais en réalité, il s'agit d'un bouton et d'un champ de type texte. Ainsi, grâce à la fonction getfile(), on simule le clic sur le champ File que l'on a caché...

Cette solution marche trés bien sur IE mais ne marche pas sous FireFox car la fonction click (appelée dans document.getelementbyId(monId).click()) n'est pas implémentée.

Quelqu'un aurait-il une solution qui marche sous IE et Firefox (ce serait déjà pas mal avec ces deux browsers).

Merci d'avance pour vos réponses,
Jul

**namstou3** · 19/09/2007, 18h06

salut jul54
A ce que je sache c'est que getElementById n'est pas implémenté sous MOZILLA, donc la solution idéale pour que ton script marche sur MOZILLA c'est de créer une fonction qui permettra d'implémenter ce genre de variable et l'intégrer à ton script.

Voilà une piste

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

http://mozilla.tlk.fr/doc03.php

**jul54** · 19/09/2007, 18h28

Salut namstou3,
merci pour ta réponse rapide mais je pense que getElementById fonctionne sous mozilla (au moins firefox 2) car j'utilise FireDebug pour debugger mon code javascript et si je mets un espion sur getElementById, j'obtiens bien mon élément en question.
Nos sites étant pour des clients et non pour tout le monde, on peut leur imposer d'installer des versions récentes de IE et firefox (mais ils doivent pouvoir choisir entre les deux).

Ton lien est quand même trés intéressant et me sera surement utile par la suite

**jeca** · 20/09/2007, 09h05

Bonjour,

La solution est là :
http://www.quirksmode.org/dom/inputfile.html

**SpaceFrog** · 20/09/2007, 09h10

pas besoin d'aller aussi loin... las solution a déja été donnée sur developpez, une petite recherche s'impose

**jeca** · 20/09/2007, 09h25

La faq fournit le même lien.

**jul54** · 20/09/2007, 09h30

J'avais pourtant fait une recherche infructueuse... J'ai pas du choisir les bons mots pour la recherche, quand à la faq je n'y ait trouvée que ce que j'ai affiché et qui ne fonctionne pas sous firefox, je vais essayer d'ouvrir les yeux aujourd'hui. Merci pour le lien et pour vos réponses, je regarde ça avant de mettre le post à résolu.

Merci à tous

**jul54** · 20/09/2007, 09h42

Pour le lien laisser par jeca, il finit en concluant que Mozilla n'a pas implémenté la fonction click et que la solution indiquée ne marche pas sous mozilla, tout comme la solution de la faq que j'avais repris. Donc mon problème reste le même.
Merci à vous tous quand même, ayant déjà perdu ma journée d'hier sur ce sujet je vais passer à autre chose et j'essaierai de réinventer la roue plus tard, si je trouve une solution simple, je la communiquerai à developpez.com

Bonne journée à vous tous.

**jeca** · 20/09/2007, 09h59

J'utilise personnellement avec succès cette solution sur IE6, Firefox et Opéra.
La feuille de style étant celle indiquée dans le lien, voici mon code html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<div class="fileinputs">
  <input type="file" size="60" name="fichier" class="file" onchange="this.form.fauxfichier.value = this.value;" />
  <div class="fakefile">
    <input type="text" size="60" name="fauxfichier" value="" />
    <input type="button" class="bouton" value="Rechercher" />
  </div>
</div>

**SpaceFrog** · 20/09/2007, 11h27

de mémoire il faut passer par un input type hidden ...

**Bisûnûrs** · 20/09/2007, 11h37

Pas besoin de se casser la tête, le texte du bouton parcourir est dans la langue du navigateur.

**jul54** · 20/09/2007, 12h08

Merci pour vos réponses,

le texte du bouton parcourir est dans la langue du navigateur.

Je m'en doute bien, mais je souhaite qu'il soit dans la langue du site, même si ce ne sera pas souvent le cas, on peut imaginer par exemple un utilisateur voulant l'application en anglais alors qu'il est en france, il aura alors tous les textes en anglais sauf ce bouton.

de mémoire il faut passer par un input type hidden ...

C'est la solution proposer par la faq (cf mon premier post), seulement, on simule ensuite un click sur le bouton qui ne fonctionne pas sous firefox.

La solution de jeca me parait relativement similaire...

**jeca** · 20/09/2007, 12h09

Envoyé par Bisûnûrs

Pas besoin de se casser la tête, le texte du bouton parcourir est dans la langue du navigateur.

Oui, mais il est impossible de changer l'aspect du bouton. Donc s'il y a plusieurs boutons dans un formulaire, je n'ai trouvé que cette solution pour obtenir un aspect homogène. Et puis, ça fonctionne avec très peu de code, alors, pourquoi se priver ?

**Bisûnûrs** · 20/09/2007, 12h10

J'ai mis ça dans les contributions sinon :

http://developpez.net/forums/showpos...4&postcount=12

**jul54** · 20/09/2007, 14h16

en effet cette solution marche pour IE et firefox, c'est parfait pour moi.

Merci à vous tous pour votre aide

input type="file"

JavaScript

Discussions similaires

Partager

Partager