18041 sujets

Questions générales et questions de débutants

Affichage d'apperçu image avant upload

Je travaille 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/[/url]

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


.image-upload input
	{
		display: none;
	}

	.image-upload img
	{
		cursor: pointer;
	}



js


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



NB / Les code css et js sont adaptés du net.


Cordialement

A. Farhani[/i]
Sujet clos
Aller à