Prévisualisation image avant upload

Bonjour a tous.

Voici mon souci:
Je mets sur mon site un systeme de upload d'images multiple. J'aimerai que l'utilisation voit l'image telechargee.

J'arrive a le faire avec un seul fichier mais pas avec plusieurs :?
J'ai essaye de faire une boucle mais sans succes egalement.

Quelqu'un pourrait m'eclairer?
Merci d'avance.

David

Voici le code fonctionnant avec un seul fichier upload:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<input type="file" name="fileUpload" id="fileUpload" onchange="readURL(this);" /><br /> <img class="preview" src="webroot/img/preview.jpg" alt="Preview" title="Preview" /> <script> function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('.preview') .attr('src', e.target.result) .height(100) }; reader.readAsDataURL(input.files[0]); } } </script>

---

Donc tu veux plusieurs images preview, une par fichier ? Dans ce cas tu peux soit ajouter autant de <img> que de <input> dans ton HTML.

Si tu places chaque <img> derrière ton <input>, tu peux récupérer le bon élément comme ceci : $(input).next('.preview') au lieu de $('.preview')

En fait, je fais comme ceci:
Le name fileUpload est un tableau puisqu'il y a une boucle php.
Cependant, en JS pas moyen avec la fonction que j'utilise d'en faire un tableau:?
JS fonctionne mais me donne le preview d'une image pour tout les champs type file.

Merci d'avance

D

Code:

---

1 2 3 4 5 6 7 8 9

<?php for($i=1;$i<=6;$i++){ ?> <div class="content_pic_upload"> <div class="file_upload"> <input type="file" name="fileUpload[]" /> <img class="preview" src="webroot/img/preview.jpg" alt="Preview" title="Preview" /> </div> <?php }?>

---

J ai modifie tel que tes conseil.
Cela fonctionne. Je cloture et te remercie.

finalement ça a donné quoi ce code ?