Input multiples fichiers avec affichage

Version imprimable

Bonjour,

Voila, malgré mes recherches sur le forum avec de nombreux sujets qui y répondent, je n'arrive pas a créer mon code perso...

Je cherche a afficher lorsque on clique sur Parcourir, et qu'on sectionne les fichier, le nom de tous les fichiers sélectionnes.

Voici mon ébauche de départ:

Code:

1
2
3
4
5
6
7
8
9
 
<li style="height:auto;">
            <label for=picture style="width: 300px;">Ajouter (JPG, JPEG ou PNG | max. 5 Mo )</label>
            <div id='phrase'></div>
            <input type='file' name='fichier[]' multiple="multiple" id='fichier' style='display:none' onchange='document.getElementById('phrase').innerHTML = "Vous avez choisi : "+this.Value;'><br/>
            <input name="" type='button' onclick='document.getElementById("fichier").click();' value='Parcourir...'>
            <input type="hidden" name="MAX_FILE_SIZE" value="1000000" />
            <div style="clear:both"></div> 
          </li>

Ce code marche tres bien pour 1 fichier mais pas pour plusieurs alors j'ai tenté du JAVA avec :

Code:

1
2
3
4
5
6
7
8
9
 
<li style="height:auto;">
            <label for=picture style="width: 300px;">Ajouter (JPG, JPEG ou PNG | max. 5 Mo )</label>
            <div id='phrase'></div>
            <input type='file' name='fichier[]' multiple="multiple" id='fichier' style='display:none' ><br/>
            <input name="" type='button' onclick='document.getElementById("fichier").click();' value='Parcourir...'>
            <input type="hidden" name="MAX_FILE_SIZE" value="1000000" />
            <div style="clear:both"></div> 
          </li>

Et un bout de code Script:

Code:

1
2
3
4
5
6
7
8
9
10
11
 
document.getElementById('fichier').onchange=function(){
    // On récupère la liste des fichiers
    var listeFichiers = document.getElementById('fichier').files;
    for ( var i = 0; i < listeFichiers.length; i ++ )
    {
        var unFichier = listeFichiers[i];
        var message = unFichier.name;
        document.getElementById('phrase').innerHTML = "Vous avez choisi : "+message;
    }
});

Sauf que bah... c'est pas tres concluant.. Rien ne s'affiche :/

Ca dois etre vraiment un pb de Me*** mais trop pas doué de le voir :/

J’espère que vous pourrez m'aider !! ;)

Merci :D

08/06/2016, 11h12
EddiGordo
Je ne sais pas si le problème se résume à ça mais déjà, tu as un espace en trop dans ta boucle :
Code:

1 2 for ( var i = 0; i < listeFichiers.length; i ++ )
à remplacer par
Code:

1 2 for ( var i = 0; i < listeFichiers.length; i++ )
08/06/2016, 11h19
Shadors

J'ai supprimé ce petit espace mais non, il se trouve que le problème n'est pas résolu :/
Je n'arrive pas a même comprendre pourquoi est-ce que rien ne s'affiche alors que le code a l'air bon. Il devrai au moins y avoir en toute logique le nom d'un fichier mais la rien :/ Et dans ma page en dev rien ne s'ajoute ou s'enlève :/
08/06/2016, 11h23
Shadors

En revanche si je renomme mon script en tant que fonction, et que je met dans mon champ de fichier : onchange='maFonction()' je peut voir écrit le nom d'un seul fichier

Tu peux faire ça :
Pour ton html, catcher l'évènement change :

Code:

1
2
 
<input type='file' name='fichier[]' multiple="multiple" id='fichier' style='display:none' onchange="displayFileNames()">

Et pour ton js :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
function displayFileNames () {
            // On récupère la liste des fichiers
            var listeFichiers = document.getElementById('fichier').files;
            for (var i = 0; i < listeFichiers.length; i++) {
                var phrase = document.getElementById('phrase')
                if(i==0)
                    phrase.innerHTML = phrase.innerHTML + "Vous avez choisi : "
                var unFichier = listeFichiers[i];
                var message = unFichier.name;
                phrase.innerHTML = phrase.innerHTML + "  " + (i + 1) + " : " + message;
            }
        };

08/06/2016, 11h29
Shadors

Super tout fonctionne !! :D
Merci bcp ;)