Discussion :

[NioX5199]

Bonjour tout le monde. Pour un portail que je réalise en php j'ai ecrit un script me permettant d'ajouter des champs d'upload de fichier et de les retirer en cliquant sur un boutton cela afin de permettre l'upload simultanée de 1 à 10 photos pour un album.
Le script semble bien fonctionné sur Firefox 2 mais par contre impossible de retirer un champs sur IE6 ( pas testé sur ie7 )

Voici le code:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<p>Cliquer sur "Ajouter un champs" pour ajouter plusieurs photos en meme temps.</p>
<p>Veillez à ce que la taille des photo n'excède pas 2Mo ( 2048 ko ).</p>
<form action='index.php?page=fichierdetraitement' enctype='multipart/form-data' method='post' id="form">
<input type="button" value="Ajoute un champs" onclick="addfield()" /><input type="button" value="Retirer un champs" onclick="removefield()" /><div id="nombre"></div>
<input type='hidden' name='MAX_FILE_SIZE' value='2048000'/>
<input type='submit' value='Envoyer' name='Transfert'><br />
</form>
 
<div id="modele_upload" style="display: none;">
	<p>
		Fichier: <input type='file' name='pix[]' size="30"/>
		Commentaire: <input name='caption[]'/> 
		Catégorie: <select name='categorie[]' size='1' id='categorie'>
		<?php 
                include("server_cx.php"); // connexion au server
                
                //on recupère les noms des categories:
                $requete = "SELECT nom FROM album_categories ";
                $sqlquery = mysql_query($requete) or die ("Recupération des categories impossible !");
                while ( $ligne = mysql_fetch_array($sqlquery,MYSQL_ASSOC))
                {
                        echo  "<option value = '".$ligne['nom']."'>".$ligne['nom']."</option>" ; // ajout des categorie au menu deroulant
                }
                ?>
		</select>
	</p>
</div>
 
<script type="text/javascript">
 
var number = 0;
 
function addfield() 
{
 
	if (number < 10 )
	{
		//pour ajouter une ligne d'upload:
	var ligne = document.getElementById('modele_upload').cloneNode(true); 
	ligne.setAttribute('id',number);
	ligne.style.display = '';
	document.getElementById('form').appendChild(ligne);
	}
	number++;
		if (number >= 10) number = 10;
			document.getElementById('nombre').innerHTML = number;
}
 
function removefield() 
{
 
	number -= 1;
 
	var last = document.getElementById(number);
	form = document.getElementById('form');
	//last.style.display = 'none';
	form.removeChild(last);
 
		if (number <= 0) number = 0;
			document.getElementById('nombre').innerHTML = number;
}
 
</script>

Voila étant un gros débutant du JS j'aimerai savoir comment rendre mon script compatible avec ie6-7 en plus de ff. Voila merci a tous de votre attention A+

Si il vous faut plus d'info n'hésitez a poser des question. Ciao

[SpaceFrog]

merci de poster le code html génére et pas le php ...

[NioX5199]

Désolé c'est vrai que c'est plus pratique, voila:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<p>Cliquer sur "Ajouter un champs" pour ajouter plusieurs photos en meme temps.</p>
<p>Veillez à ce que la taille des photo n'excède pas 2Mo ( 2048 ko ).</p>
<form action='index.php?page=ajout_photo_traitement' enctype='multipart/form-data' method='post' id="form">
<input type="button" value="Ajoute un champs" onclick="addfield()" /><input type="button" value="Retirer un champs" onclick="removefield()" /><div id="nombre"></div>
<input type='hidden' name='MAX_FILE_SIZE' value='2048000'/>
<input type='submit' value='Envoyer' name='Transfert'><br />
</form>
 
<div id="modele_upload" style="display: none;">
	<p>
		Fichier: <input type='file' name='pix[]' size="30"/>
 
		Commentaire: <input name='caption[]'/> 
		Catégorie: <select name='categorie[]' size='1' id='categorie'>
		<option value = 'Fête de Thûrne'>Fête de Thûrne</option><option value = 'Grand bhâ'>Grand bhâ</option><option value = 'Internat'>Internat</option><option value = 'Monomes'>Monomes</option><option value = 'Quarantaine'>Quarantaine</option><option value = 'Veillée au plaques'>Veillée au plaques</option><option value = 'Voyage Caen'>Voyage Caen</option><option value = 'Voyage Goellettes'>Voyage Goellettes</option><option value = 'Voyage Paris'>Voyage Paris</option>		</select>
 
	</p>
</div>
 
<script type="text/javascript">
 
var number = 0;
 
function addfield() 
{
 
	if (number < 10 )
	{
		//pour ajouter une ligne d'upload:
	var ligne = document.getElementById('modele_upload').cloneNode(true); 
	ligne.setAttribute('id',number);
	ligne.style.display = '';
	document.getElementById('form').appendChild(ligne);
	}
	number++;
		if (number >= 10) number = 10;
			document.getElementById('nombre').innerHTML = number;
}
 
function removefield() 
{
 
	number -= 1;
 
	var last = document.getElementById(number);
	form = document.getElementById('form');
	//last.style.display = 'none';
	form.removeChild(last);
 
		if (number <= 0) number = 0;
			document.getElementById('nombre').innerHTML = number;
}
 
</script>

[NioX5199]

UP

[yjuliet]

Pour le rendre cross-compatible, c'est simple, tu ouvres les navigateurs en question et tu testes.

Après, il y a un site qui pourra t'aider : http://www.webdevout.net/browser-support

Tu trouveras la liste de compatibilité pour IE6, IE7, FF2 et Opéra 9.

Bon courage.