Ecrire dans une div

Bonjour,

Je souhaiterais récupérer les noms des fichiers d'input file et les écrire dans une div.
Pour l'instant je procède comme ceci :

Code:

---

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

<script type="text/javascript"> function affCache(idpr) { var pr = document.getElementById(idpr);   if (pr.style.display == "") { pr.style.display = "none"; } else { pr.style.display = ""; } }   function f1() { document.getElementById('fichiers').innerHTML = document.getElementById('fichier').value; }       </script>

---

et mon formulaire :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

<form class="form" name"form" method="post" enctype="multipart/form-data" action="upload.php"> <h2>Ajouter un PDF</h2>   <div id="fichiers"> Aucun fichier à uploader </div>   <div> <label for="pass">Mot de passe</label><input type="password" name="pass" /> </div> <div id="fichier1"> <label for="fichier">Fichier 1</label><input type="file" name="fichier" id="fichier" onChange="affCache('fichier2'); f1();" /> </div> <div id="fichier2" style="display:none"> <label for="fichier2">Fichier 2</label><input type="file" name="fichier2" id="fichier2" onChange="affCache('fichier3'); /> </div> <div id="fichier3" style="display:none"> <label for="fichier3">Fichier 3 </label><input type="file" name="fichier3" id="fichier3" /> </div>   <div class="button"> <input type="hidden" name="MAX_FILE_SIZE" value="52428800" /> <button type="submit" name="upload">Soumettre</button> <button type="reset">Annuler</button> </div> </form>

---

Pour le moment j'affiche : C:\fakepath\monFichier.pdf
1) J'aimerai afficher seulement le nom du fichier.
2) Je n'arrive pas à ajouter à la suite les noms des fichiers suivant. Il marque undefined... dans ma div malgrés toutes mes tentatives.

Merci de bien vouloir m'aider.

Cordialement,

Sasuke.

Pour cette partie d'abord :

Citation:

---

Envoyé par sasuke001

Pour le moment j'affiche : C:\fakepath\monFichier.pdf
1) J'aimerai afficher seulement le nom du fichier.

---

Ca c'est assez basique comme traitement de chaine de caractère :

Code:

---

1 2 3 4 5

var chemin = "C:\\fakepath\\monFichier.pdf";// j'ai doublé les quotes dans l'exemple car elles sont interprétées une première fois ^^ alert(chemin.lastIndexOf("\\"));// lastIndexOf renvoie la position de la dernière occurrence d'une sous-chaine // DONC var fichier = chemin.substr(chemin.lastIndexOf("\\") + 1);// avec 1 seul param, substr renvoie une sous-chaine débutant à la position indiquée (jusqu'à la fin) alert(fichier);// affiche "monFichier.pdf"

---

Mais comme pour la plupart des manip de chaines, il y a d'autres manieres de procéder ^^

Citation:

---

Envoyé par sasuke001

2) Je n'arrive pas à ajouter à la suite les noms des fichiers suivant. Il marque undefined... dans ma div malgrés toutes mes tentatives.

---

>>> montre-nous le code correspondant à ta meilleure tentative, parce que là, l'extrait, il ne gère que l'affichage du premier fichier.

A vue de nez, je te conseillerais de partir sur l'idée de reconstruire la liste à chaque onChange, par exemple avec ta fonction f1 modifiée de cette manière :

Code:

---

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

function f1() {// pas facile de trouver un nom moins bien choisi ^^ var liste = []; // ligne suivante on récupère une collection des inputs (tous confondus) du form "form" (encore un nom... à changer ^^) var inputs = document.forms["form"].getElementsByTagName("INPUT"); for (var i = 0, iMax = inputs.length; i < iMax; ++i) { var inp = inputs[i]; if ((inp.type == "file") && (inp.value)) {// on ne prend que les input file ayant une valeur saisie liste.push(inp.substr(inp.lastIndexOf("\\") + 1));//le petit "épluchage" vu plus haut } } // et enfin on raccomode le tout en liste avec des <br> par exemple document.getElementById('fichiers').innerHTML = liste.join("<br/>"); }

---

... je n'ai pas testé en détail, c'est pour te donner une piste ^^