Comment afficher un apperçu d'une image avant son upload

**kader53** · 29/03/2016, 17h17

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

**Azerx** · 29/03/2016, 17h38

Bonjour,
avec une petite recherche Google, tu tombes rapidement sur ceci et cela

**ABCIWEB** · 29/03/2016, 17h57

Salut,

Ou si tu préfères un script prêt à l'emploi tu peux regarder ce module d'upload Ajax.

Il y a toutes les fonctionnalités que tu demandes et bien d'autres comme la possibilité de recadrer et/ou redimensionner les images, informations sur l'upload en temps réel, reprise d'upload pour les gros fichiers, etc. Une quinzaine de formulaires dont plusieurs customisés et responsive design (compatibles smartphones) sont donnés en exemple avec php côté serveur pour fournir des scripts entièrement fonctionnels prêts à être testés directement sans modification préalable.
Par ailleurs le script est conçu pour surpasser les limitations serveur (exceptées bien entendu celles définies volontairement par le webmestre dans la configuration du module) donc tu n'auras pas de problème concernant le nombre et la taille des fichiers.

Comment afficher un apperçu d'une image avant son upload

Conception Web

Vue hybride

Discussions similaires

Partager

Partager