Affichage apperçu images avant upload

cmkader53 13 Messages postés lundi 21 septembre 2009Date d'inscription 29 mars 2016 Dernière intervention - 29 mars 2016 à 15:23 - Dernière réponse : jordane45 20570 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 21 avril 2018 Dernière intervention
- 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;
}


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>
Afficher la suite 

1 réponse

Répondre au sujet
jordane45 20570 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 21 avril 2018 Dernière intervention - 29 mars 2016 à 17:40
0
Utile
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/


Commenter la réponse de jordane45

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.