Affichage apperçu images avant upload

Messages postés
13
Date d'inscription
lundi 21 septembre 2009
Statut
Membre
Dernière intervention
29 mars 2016
- - Dernière réponse : jordane45
Messages postés
25763
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 juin 2019
- 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

Messages postés
25763
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 juin 2019
312
0
Merci
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