Affichage apperçu images avant upload

cmkader53 Messages postés 13 Date d'inscription lundi 21 septembre 2009 Statut Membre Dernière intervention 29 mars 2016 - 29 mars 2016 à 15:23
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 - 29 mars 2016 à 17:40

Bonjour à tous

Je travail en tant qu autodidact sur un site où l'internaute upload des images .

Ce que je veux faire:

Selectionner toutes les images une par une.

Pour chaque image un aperçu s'affiche

L'internaute peut supprimer l'image qu'il veut

En fin il upload toutes les images retenues.

Voir ici pour plus de compréhension http://winsem.net/Ajout_Images/

Les codes que j'utilise:

HTML


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

A voir également:

Affichage apperçu images avant upload
"Le code à recopier et à mettre sur votre site avant de commencer" - Forum PHP
Grille affichage ✓ - Forum C / C++ / C++.NET
Apercu avant impression - Forum Visual Basic 6
Img upload - Forum PHP
Affichage publicitaire ascenseur - Forum VB.NET

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 344
29 mars 2016 à 17:40

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

redimensionner et upload image

TCD - Deplacer la colonne grand total

Comparer 2 image

Afficher le temps restant avant un timestamp

Ou commencer:

Votre réponse

Discussions similaires