Bonsoir à tous,

Sur mon site d'annonce les internautes ont la possibilité d uploader jusqu'à 5 photos par annonce.

Ce que je veux faire:

1- l'internaute selectionne les images une par une.
2- pour chaque image selectionnée s'affiche une appérçu.
3- il à la possibilité de supprimer n'importe la quelle.
4- une fois que toutes les images sélectionné et leur aperçu affiché, l'internaute les upload par le bouton valider.

Pour mieux saisir mon objectif voir :

- Le test ci-après:

http://www.winsem.net/Ajout_Images

- Les codes c-après

Nb : pour le js et le css les codes sont récupérés et adaptés du net.

Html:

Code html : 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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 
<head>
 
	 <link rel="stylesheet" type="text/css" href="ajoutimg.css" media="screen" />
 
	 <!-- Script js pour l'ajout des photos -->
	 <?php include"ajoutimg.js";?>
 
</head>
<body>
<form action="index.php" method="post" enctype="multipart/form-data">
	<table border align=center>
		<tr>
			<td colspan=3>
			Photos d'illustration de l'annonce:
			</td>
		</tr>
		<tr>	
			<td  align=center valign=top >
				<input type="hidden" name="MAX_FILE_SIZE" value="500000" />			
				<div class="image-upload" >
				<label for="files"><img width=100 height=100 src="UploadImg.png"/></label>
				<input id="files" type="file" name="IllustrationPhoto1" accept="image/*" />
				<output id="list"></output>
				</div>
			</td>
 
			<td  align=center valign=top >
				<input type="hidden" name="MAX_FILE_SIZE" value="500000" />
				<div class="image-upload" >
				<label for="files"><img width=100 height=100 src="UploadImg.png"/></label>
				<input id="files" type="file" name="IllustrationPhoto2" accept="image/*" />
				<output id="list"></output>
				</div>
			</td>
 
			<td  align=center valign=top >
				<input type="hidden" name="MAX_FILE_SIZE" value="500000" />
				<div class="image-upload" >
				<label for="files"><img width=100 height=100 src="UploadImg.png"/></label>
				<input id="files" type="file" name="IllustrationPhoto3" accept="image/*" />
				<output id="list"></output>
				</div>
			</td>
 
		</tr>
 
		<tr>	
			<td align=center>
				</br>
				Afficher</br>
				apper&ccedil;u image <span style="color:red">#1</span></br>
				avant validation</br></br>
				+</br></br>
				<span style="color:red">possibilit&eacute; </br> de </br> suppression</span>
				</br></br>
			</td>
 
			<td align=center>
 
				</br>
				Afficher</br>
				apper&ccedil;u image <span style="color:red">#2</span></br>
				avant validation</br></br>
				+</br></br>
				<span style="color:red">possibilit&eacute; </br> de </br> suppression</span>
				</br></br>
 
			</td>
 
			<td align=center>
 
				</br>
				Afficher</br>
				apper&ccedil;u image <span style="color:red">#3</span></br>
				avant validation</br></br>
				+</br></br>
				<span style="color:red">possibilit&eacute;</br> de </br>suppression</span>
				</br></br>
 
			</td>
 
		</tr>
 
		<tr>
			<td align=center colspan=3>
			<input type="submit" />
			</td>
		</tr>
 
	</table>
</form>	
</body>
</html>

Css
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
.image-upload input
	{
		display: none;
	}
 
	.image-upload img
	{
		cursor: pointer;
	}


js

Code javascript : 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
<script>
		function handleFileSelect(evt) {
		var files = evt.target.IllustrationPhoto; // FileList object
 
		// files is a FileList of File objects. List some properties.
		var output = [];
		for (var i = 0, f; f = IllustrationPhoto[i]; i++)
			{
			output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
					  f.size, ' bytes, last modified: ',
					  f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
					  '</li>');
			}
		document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
		}
</script>

Cordialement

A. Farhani