Ecrire dans une div

[sasuke001]

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.

[RomainVALERI]

Pour cette partie d'abord :

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 ^^

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 ^^