Comment afficher un apperçu d'une image avant son upload
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:
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çu image <span style="color:red">#1</span></br>
avant validation</br></br>
+</br></br>
<span style="color:red">possibilité </br> de </br> suppression</span>
</br></br>
</td>
<td align=center>
</br>
Afficher</br>
apperçu image <span style="color:red">#2</span></br>
avant validation</br></br>
+</br></br>
<span style="color:red">possibilité </br> de </br> suppression</span>
</br></br>
</td>
<td align=center>
</br>
Afficher</br>
apperçu image <span style="color:red">#3</span></br>
avant validation</br></br>
+</br></br>
<span style="color:red">possibilité</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:
1
2
3
4
5
6
7
8
9
| .image-upload input
{
display: none;
}
.image-upload img
{
cursor: pointer;
} |
js
Code:
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
