création input file dynamiquement

Version imprimable

10/08/2009, 15h50
knebhi

création input file dynamiquement

Bonjour,

j'ai créé un formulaire et dans ce formulaire j'ai la possibilité d'uploader des fichiers.

or pour une catégorie de fichier j'ai un un fichier par défaut dont j'indiquerai le chemin par défaut sur le serveur.
dans une minorité de cas l'utilisateur va uploader un fichier.

j'ai donc besoin de créer une sorte de menu déroulant avec un choix par défaut qui serait par exemple : default.doc et une alternative qui serait par exemple : autre et dans ce cas un bouton parcourir viendrai s'afficher.

j'ose imaginer que l'ajout dynamique de fichier se fait par du js.

si vous avez un conseil a me donner ou un post ou tuto qui fait mention de cette problématique je suis preneur.

merci de votre aide.
10/08/2009, 15h58
SpaceFrog

Tu peux créer dynamiquement un input type file ... mais c'est assez tricky ...
(cf http://www.developpez.net/forums/d53...ynamique-form/)

Mais je pense qu'il serait bien plus simple que l'input soit déja sur la page et visibility hidden ou display:none et basculer son style de façon à le rendre visible

bien vu spacefrog

j'ai ajouté ce code au formulaire :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<tr>
 
				<td align="center">
				<b><i>Convention de transcription :</i></b>
				</td>
				<td>
 
				<input name="convention" type="checkbox" 
			onClick="other_convention()">Autre
 
				</td>
			</tr>
 
			<tbody id="conventionUpload" style="visibility: hidden">
			<tr>
				<td align="center"><b><i>Joindre Convention de Transcription</i></b></td>
				<td bgcolor="white" align="center"><input
					name="convention_transcription" type="file"
					onChange="verif_extensionCONV(this.value);"></td>
			</tr>
			</tbody>

et pour le js qui permet d'afficher le champs :

Code:

1
2
3
4
5
6
7
8
<script language="JavaScript">
 
function other_convention()
{
obj=document.getElementById("conventionUpload").style;
if(document.formulaire.convention.checked==true){obj.visibility='visible';}else{obj.visibility='hidden';}
}
</script>

merci

j'ai une autre question pour améliorer mon formulaire. j'aimerai en effet pouvoir choisir entre :
- convention par défaut
- autre

si c'est convention par défaut qui est choisi rien ne se passe
dans le cas du autre le champ visibility: hidden apparaitra.

je veux donc remplacer les checkbox par des radios

et obtenir quelquechose comme ceci :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <td> <input name="convention" type="radio" value="TCOFConventionsCommunes_VersionTranscriber2008.doc" >TCOF VersionTranscriber2008 <input name="convention" type="radio" onClick="other_convention()">Autre </td> </tr> <tbody id="conventionUpload" style="visibility: hidden"> <tr> <td align="center"><b><i>Joindre Nouvelle Convention de Transcription</i></b></td> <td bgcolor="white" align="center"><input name="convention_transcription" type="file" onChange="verif_extensionCONV(this.value);"></td> </tr> </tbody>
le code js :
Code:

1 2 3 4 5 6 7 8 <script language="JavaScript"> function other_convention() { obj=document.getElementById("conventionUpload").style; if(document.formulaire.convention.checked==true){obj.visibility='visible';}else{obj.visibility='hidden';} } </script>
j'ai un soucis au niveau du name sachant qu'il doit etre identique dans les checkbox et que mon js ne se répère plus car les deux ont le meme name.

je me répond a moi même
;-)

alors voici le js :

Code:

1
2
3
4
5
6
<script type="text/javascript">      
function verifie_form(arg)      
{           if(arg==2)           
{                document.getElementById('conventionUpload').style.visibility='visible';           }           
else           {                document.getElementById('conventionUpload').style.visibility='hidden';           }      } 
</script>

et le formulaire associé :

Code:

1
2
3
4
5
6
7
8
9
<form action="page.php" method="post">
 
<p><label><input type="radio" name="convention" value="1"
	onclick="verifie_form(1)" checked="checked" />Convention par défaut</label></p>
<p><label><input type="radio" name="convention" value="2"
	onclick="verifie_form(2)" />Autre</label></p>
 
<p id="conventionUpload" style="visibility: hidden">Convention à joindre<input type="file"></p>
</form>