Discussion :

[andaman]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[SylvainPV]

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

[andaman]

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

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[david5786]

finalement ça a donné quoi ce code ?