Version complète: sur le forum Webmaster Hub : Remplacer le bouton "Parcourir..." d’un INPUT FILE
Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS
Nissone
jeudi 16 juin 2005 à 16:34
Je me suis servie de l'astuce expliquée dans Remplacer le bouton "Parcourir..." d’un 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 :
CODE
<form name="attachDocForm" id="attachDocForm">
    
    <label for="attachDoc1">S&eacute;lectionner un document&nbsp;:</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
jeudi 16 juin 2005 à 21:02
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 wink.gif )
CODE
<form name="attachDocForm" id="attachDocForm">

<div style="position :absolute;">
<label for="attachDoc1">S&eacute;lectionner un document&nbsp;:</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&eacute;lectionner un document&nbsp;:</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
vendredi 17 juin 2005 à 08:52
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... blink.gif
Nissone
vendredi 17 juin 2005 à 09:05
Erreur corrigée !
J'avais inversé les deux id au moment de l'attribuation des valeurs ! laugh.gif
Et comme j'étais persuadée d'avoir vérifié ce point hier, je n'avais pas regarder de côté ... pourtant évident !!! rolleyes.gif

Je vais maintenant pouvoir épater tout le monde avec mes jolis boutons "Parcourir" wink.gif
Merci.
Xavier
vendredi 17 juin 2005 à 09:40
Petite remarque concernant l'accessibilité : vérifier que ce soit toujours fonctionnel sans javascript whistling.gif
Nissone
vendredi 17 juin 2005 à 09:49
Tu fais bien de le faire la remarque wink.gif

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 tongue.gif
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.