Discussion :

[flokent7]

Bonjour,
alors, j'ai un formulaire et je dois faire un bouton parcourir pour sélectionner un fichier, sauf que je voudrais qu'au lieu d'afficher le chemin+le nom avant le bouton comme c'est le cas en ce moment, on affiche le nom du fichier en dessous de ce bouton en mettant un truc du genre Le fichier que vous avez sélectionné : NOMFICHIER.
Et biensur cette phrase n'apparait pas avant que l'utilisateur ne clique sur le bouton...
Mon formulaire pour le moment:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<form method="post" action="connexion.php"  ENCTYPE="multipart/form-data" ><p><B>
 
		<!-- Les labels servent à aligner le formulaire-->				
		<label for="NOMBDD">Nom de la base de données:</label><input type="text" name="NOMBDD"/><br><br><br />
		<label for="MDPBDD">Mot de passe de la base de données:</label><input type="text" name="MDPBDD" /><br><br><br />
		<label for="NOMTABLE">Nom de la table:</label><input type="text" name="NOMTABLE" /><br><br><br />
		<input type="hidden" name="MAX_FILE_SIZE" value="300000"> <!-- Limite la taille du fichier à uploader-->
		<label for="mon_fichier">Fichier à restaurer dans la base de donnée: </label><input type="file" name="mon_fichier" size="3"></B><br><br>
		<input type="submit" value="Valider" ></p>
 
</form>

Si quelqu'un pouvait m'aider, ça serait cool!

[EIN-LESER]

En dynamique faudra utiliser JavaScript pour faire quelque chose comme sa mais je suis pas sur que tu puisse toucher a l'agencement par default de la barre de recherche.

Par contre tu peux la mettre en caché et afficher ta phrase comme tu le veux en JS

[flokent7]

tu penses que je ne peux pas l'effacer carrément cette barre de recherche?!
je veux juste le bouton parcourir!!!
et t'aurais une idée du code javascript qui pourrait aller pour l'affichage en dessous?!

[EIN-LESER]

L'effacer non mais faut voire si tu peux pas le mettre en hidden ou display:non sans pour au-temps cacher le bouton parcourir.

Ensuite tu mets un évènement on-change sur ton champ (caché si su a pu le faire) et tu mets dans une variable ton texte concaténé avec le choix de l'user.
Si la variable est vide tu affiche rien. Au on-change tu mets le texte que tu veux dans la variable.

[flokent7]

J'ai toujours pas trouvé le moyen de ne pas voir cette barre!!
J'ai un autre petit souci, je voudrais que lorsque j'utilise le bouton parcourir il m'affiche la phrase le fichier que vous avez sélectionné + nomfichier avant même que je ne valide mon formulaire avec le bouton valider... une idée?

[patrickbaras]

cela devrait te convenir :

Code :

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

1
2
3
4
5
6
<form action='' id='form1' method='post'>
	<div id='phrase'></div>
	<input type='file' name='fichier' id='fichier' style='display:none' onchange='document.getElementById("phrase").innerHTML="vous allez uploader : "+this.value;'><br/>
	<input type='button' onclick='document.getElementById("fichier").click();' value='faux button'>
	<input type='submit'>
</form>

[Benjamin Delespierre]

S'il y a bien une chose que tu ne peux pas personnaliser, ce sont les inputs files. C'est une sécurité mise en place par tous les navigateurs afin d'éviter les dérives.

En revanche, ce que tu peux faire, c'est tricher avec le positionnement d'un bouton d'input transparent par dessus une image. Cette technique est utilisé par nombre d'uploader ajax comme ajax-upload. C'est à ma connaissance le seul moyen d'avoir un bouton en adéquation avec ta charte graphique.

[patrickbaras]

En revanche, ce que tu peux faire, c'est tricher avec le positionnement d'un bouton d'input transparent par dessus une image.

il peux aussi remplacer

Code :

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

	<input type='button' onclick='document.getElementById("fichier").click();' value='faux button'>

part

Code :

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

	<input type='image' src='url_de_l_image_button' onclick='document.getElementById("fichier").click();return false;'>

ne pas oublier return false; sinon un click équivaux a submit
ca donne aussi un beau bouton personnalisé

[Benjamin Delespierre]

J'aime bien ta solution. Mais j'aurais plutôt fait comme ça:

Code :

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

1
2
3
4
5
6
7
8
    <input type="file" name="file" id="file" />
    <input type="button" id="select-file" value="Selectionner un fichier"/>
    <script type="text/javascript">
    document.getElementById('select-file').onclick = function () {
        document.getElementById('file').click();
        return false;
    }
    </script>

bon c'est un détail...

[flokent7]

ok! merci pour vos réponses!! mais je n'ai pas le temps de les tester !! pour le moment, je met pause pour cacher cette fichue barre!! des que je les aurais tester je mettrais les résultats!
Ce que je veux maintenant c'est réglé cette histoire d'affichage de la phrase: le fichier sélectionné: NOMFICHIER qui s'affiche juste après que l'utilisateur ait choisit un fichier en cliquant sur le bouton parcourir... je n'arrive pas! Ce que je peux faire c'est afficher cette phrase que quand le formulaire est rechargé (pour une erreur ) apres clic sur le bouton valider...

Code :

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

1
2
3
4
if (!empty($fichier))
	{
	      $affichageFichier="Le fichier que vous avez sélectionné: ".$fichier;
	}

et dans mon formulaire:

Code :

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

<label for="affichage_fichier"><?php echo $affichageFichier;?></label>

Une idée?!!

[Benjamin Delespierre]

Tu ne peux pas définir de valeur par défaut à un input file, sinon ce serait permettre le téléchargement involontaire de ressources client.

Ce que tu peux faire en revanche c'est déclencher l'envoi du fichier avec un requête asynchrone pour le conserver coté serveur, ce qui évitera à ton utilisateur de devoir l'envoyer à nouveau. Tu peux utiliser ajax-upload pour ça ou n'importe quel uploader Ajax.

[patrickbaras]

ton formulaire adapté
avec input file caché et affichage du nom après sélection :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<form method="post" action="connexion.php"  ENCTYPE="multipart/form-data" ><p><B>
 
		<!-- Les labels servent à aligner le formulaire-->				
		<label for="NOMBDD">Nom de la base de données:</label><input type="text" name="NOMBDD"/><br><br><br />
		<label for="MDPBDD">Mot de passe de la base de données:</label><input type="text" name="MDPBDD" /><br><br><br />
		<label for="NOMTABLE">Nom de la table:</label><input type="text" name="NOMTABLE" /><br><br><br />
		<input type="hidden" name="MAX_FILE_SIZE" value="300000"> <!-- Limite la taille du fichier à uploader-->
		<label for="mon_fichier">Fichier à restaurer dans la base de donnée: </label><span id='phrase'></span>

<input type="file" name="mon_fichier" id="mon_fichier" style="display:none" onchange='document.getElementById("phrase").innerHTML=this.value;' size="3"></B><br><br>	
	    <input type='button' onclick='document.getElementById("mon_fichier").click();return false;' value='parcourir'>
		<input type="submit" value="Valider" ></p>
 
</form>

[flokent7]

C'est exactement ce qu'il me fallait!!! c'est magique!!!! merci bien!!!!!!