Apperçu des images avant upload

Fermé

cmkader53 Messages postés 13 Date d'inscription lundi 21 septembre 2009 Statut Membre Dernière intervention 29 mars 2016 - 29 mars 2016 à 17:34
jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 - 29 mars 2016 à 20:07

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:

[URL="http://www.winsem.net/Ajout_Images/"]http://www.winsem.net/Ajout_Images/[/URL]

- 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]
<!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


.image-upload input
	{
		display: none;
	}

	.image-upload img
	{
		cursor: pointer;
	}


<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

A voir également:

Apperçu des images avant upload
Des images - Guide
Dans la présentation à télécharger, sarah avait encadré directement le titre de certaines diapositives avant d’automatiser cette mise en forme pour tout le document. sur quelles diapositives avait-elle encadré directement le titre ? ✓ - Forum Bureautique
Retrouver mon compte copains d'avant - Forum Réseaux sociaux
Veuillez patienter quelques minutes avant de réessayer instagram ✓ - Forum Instagram
Avant browser - Télécharger - Navigateurs

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717
29 mars 2016 à 20:07

Bonjour,

Et donc ... quel est le souci rencontré ?
Si ta question est "comment faire le preview..." ... tu peux t'inspirer de ce code :
http://chez-syl.fr/2015/02/jquery-uploader-une-image-en-ajax-avec-un-apercu-avant-envoi/

Discussions similaires

calcule nombre des pixels "noir" dans un image (noir/blanc)

chaima csc

je voudrais accéder à mon compte copains d'avant

Copains d'avant, qui a visité notre profil

Comment savoir qui a visité notre profil copain d'avant et facebook ?