Remplacer le bouton "Parcourir..." d�un INPUT FILE

[Nissone]

Je me suis servie de l'astuce expliquée dans Remplacer le bouton "Parcourir..." dun INPUT FILE : enfin une solution !.

Mais j'ai besoin d'explications supplémentaires... (J'ai fais une recherche mais n'ai pas trouvé de sujet attaché à l'article).

J'ai mis en place le code, mais le problème est que le fichier, une fois choisi, apparaît lui aussi en alpha 0 !

Je ne sais pas comment y remédier.

Voici mon code :

<form name="attachDocForm" id="attachDocForm">

	<label for="attachDoc1">Sélectionner un document :</label>
	<div style="position :absolute;">
  <input type="file" name="attachDocParcourir1" id="attachDocParcourir1" style="filter :alpha(opacity=10)" size="45" onfocus="document.getElementById('attachDoc1').value=document.getElementById('attachDocParcourir1').value" onchange="document.getElementById('attachDoc1').value=document.getElementById('attachDocParcourir1').value" />
	</div>
	<input type="text" class="LongChamps8" name="attachDoc1" id="attachDoc1" />
	<img src="images/bt_parcourir.gif" class="btParcourir" width="121" height="17" alt="Parcourir" />

	</form>

[Vincent]

Bonjour Nissone

Le problême est que tu as ajouté une difficultée en mettant un libellé.

en fait, si tu veux que la partie cachée soit identique a la partie affichée en terme de position, tu as 2 solutions :

- soit sur le tag <div> tu positionnes un peu plus précisement ton élément

- soit tu t'embetes pas avec la redondance inutile d'information et tu ajoutes ton libellé a ton champs caché et tu mets les size au meme chiffre.

voici un code qui fonctionne (solution 2, il fait tard )

<form name="attachDocForm" id="attachDocForm">

<div style="position :absolute;">
<label for="attachDoc1">Sélectionner un document :</label>
 <input type="file" name="attachDocParcourir1" id="attachDocParcourir1" style="filter :alpha(opacity=10)" size="45" onfocus="document.getElementById('attachDoc1').value=document.getElementById('attachDocParcourir1').value" onchange="document.getElementById('attachDoc1').value=document.getElementById('attachDocParcourir1').value" />
</div>
<label for="attachDoc1">Sélectionner un document :</label>
<input type="text" class="LongChamps8" name="attachDoc1" id="attachDoc1"/>
<img src="images/bt_parcourir.gif" class="btParcourir" width="121" height="17" alt="Parcourir" align="absmiddle"/>

</form>

[Nissone]

Bonjour Vincent et merci de ta réponse.

...Mais mon soucis n'est pas rêglé !

Je pense que mon problème est plus lié au javascript : l'affichage est tel que je le veux, et le bouton "Parcourir..." (le vrai) fonctionne normalement et affiche bien le fichier sélectionné dans son input ("attachDocParcourir1").

Mais je ne ré-affiche pas la valeur de l'input type file ("attachDocParcourir1") dans mon input type text ("attachDoc1")

Seulement, je n'arrive pas à voir dans mon code en quoi j'ai pû me tromper dans l'affectation de ma value...

[Nissone]

Erreur corrigée !

J'avais inversé les deux id au moment de l'attribuation des valeurs !

Et comme j'étais persuadée d'avoir vérifié ce point hier, je n'avais pas regarder de côté ... pourtant évident !!!

Je vais maintenant pouvoir épater tout le monde avec mes jolis boutons "Parcourir"

Merci.

[Xavier]

Petite remarque concernant l'accessibilité : vérifier que ce soit toujours fonctionnel sans javascript

[Nissone]

Tu fais bien de le faire la remarque

Le problème, c'est que c'est effectivement fonctionnel sans javascript ... ma pas (du tout) ergonomiquement : l'utilisateur ne voit pas le fichier qu'il a sélectionné !!

Là, comme ça, je ne vois pas comment résoudre si ce n'est en détectant l'activation du javascript et en affichant un code différent alors...

Il se trouve que dans mon cas, la question ne se pose pas ; le public est TRES ciblé et je connais d'avance sa configuration