créer une liste d'upload

**gforce** · 23/03/2007, 12h52

il n' y a aucune solution pour effacer le texte qu'il contient?

**SpaceFrog** · 23/03/2007, 12h55

oui le reste du form ... mais bon ça efface aussi le reste ...

mais a priori tu ne devrais même pas en avoir besoin (d'ou mon width à 0)
mais si tu veux vraiment le vider tu devras le masque par exemple avec un inout texte auquel tou pourras acceder

**gforce** · 23/03/2007, 12h59

c'est parceque le style width n'est pas pris en charge sur ff, tu n'as pas remarqué? alors je me suis dis ok on le voit partout mais il faudra juste le vider

**SpaceFrog** · 23/03/2007, 13h03

arf non je n'avais pas fait gaffe ..
donc il ne te reste plus qu'a couvrir la partie texte avec un div ...

arf j'oubliais le inout file comme les select restent au dessus...
he je ne vois pas trop de solution ...

le retirer puis le recréer ?

**gforce** · 23/03/2007, 13h17

je pense que le masquer va devenir trop de la bidouille, tu en pense quoi?
si non tant pis on le vois mais il faut juste que le path s'efface du champ file une fois ajouter a la liste.

regarde peut etre le tout 1er code que j'ai posté pcq, dans celui-la il s'efface sans effacer tout le form.

**SpaceFrog** · 23/03/2007, 13h49

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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
 
<title>Nouvelle page 1</title>
<script type='text/javascript'>
 var pathliste= new Array();
 var fileliste=new Array();
 
function add2list(file){
myselect=document.getElementById('uploadlist')
myselect.length+=1;
pathliste[pathliste.length]=file 
myselect.options[myselect.options.length-1].innerHTML=file.split('\\')[file.split('\\').length-1];
myselect.options[myselect.options.length-1].value=myselect.options.length-1
myselect.size=myselect.options.length
document.forms[0].reset()
document.getElementById('hiddenlist').value=pathliste.join(";")
 
fileliste.length=0
		for(i=0;i<pathliste.length;i++){
 
		 fileliste[fileliste.length]=pathliste[i].split('\\')[pathliste[i].split('\\').length-1]
											   }
 
var obj1=document.getElementById('choose')
var obj2=obj1.cloneNode(true)
obj1.parentNode.insertBefore(obj2,obj1)
obj1.parentNode.removeChild(obj1)
 
   }
 
 
 
function deletefile(){
   var indice;
 
 	myselect=document.getElementById('uploadlist')
		if (myselect.options.length==0 || myselect.selectedItem==-1){return false;}
 
       for(i=0;i<myselect.options.length;i++){if(myselect.options[i].selected){indice=myselect.options[i].value;myselect.removeChild(myselect.options[i])}
       }
       myselect.size=myselect.options.length+1;
       pathliste.splice(indice,1)
       fileliste.splice(indice,1)
       document.getElementById('hiddenlist').value= pathliste
 
     }
 
 
function populate(){     
document.getElementById('paths').innerHTML=pathliste.join('\<br\/\>');
 
document.getElementById('files').innerHTML=fileliste.join('\<br\/\>');
}
 
</script>
 
</head>
 
<body>
<form action="" onsubmit="alert(document.getElementById('hiddenlist').value);">
<input type='file' id='choose' onchange='add2list(this.value)'  />
 
<input type="hidden" name='hiddenlist' id='hiddenlist' />
<select id="uploadlist" ><br/>
</select>
<input type="button" value="supprimer" onclick="deletefile()" />
 
<input type="submit" value="envoyer" />
</form>
<input type="button" value="verifier" onclick="populate()" />
 
<div id ="paths" style="border:solid 1px silver;"></div>
<div id="files" style="border:solid 1px silver;"></div>
 
</body>
 
</html>

**gforce** · 23/03/2007, 15h03

nikel parfait j'ai un peu reagrdé avec les nodes. je ne sais pas exactement ce que tu as fait mais tu t'ai bien débrouillé

dernière étape si je veux récupérer le $_POST['sourcefile']
j'obtient le path des fichier. j'aimerais aussi avoir un tableau avec juste les noms.

**SpaceFrog** · 23/03/2007, 15h22

explication de texte :

Code :

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

1
2
3
4
var obj1=document.getElementById('choose')  // je recupère l'input file
var obj2=obj1.cloneNode(true)                      // je le clone
obj1.parentNode.insertBefore(obj2,obj1)         // j'insère le clone avant l'ancien
obj1.parentNode.removeChild(obj1)                // je detruis l'ancien

pour ton truc tu rajoutes un input type hiden et tu lui mets filelist dedans
je te laisse faire c'est pas dur ...

**gforce** · 23/03/2007, 15h48

ok ça fonctionne pour récupérer les noms par contre lorsque je sélectionne un nouveau fichier a insérer dans la liste en vidant le champ file il me fait perdre mes sélections sur un select en multiple qui se trouve un peu + haut. alors que tout les autres champs de mon formulaire ne bouge pas

**SpaceFrog** · 23/03/2007, 15h59

vire le reset du form il ne sert plus a rien ...
et rajoute un return false sur le onkeydown ...

ce qui donne:

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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
 
<title>Nouvelle page 1</title>
<script type='text/javascript'>
 var pathliste= new Array();
 var fileliste=new Array();
 
function add2list(file){
myselect=document.getElementById('uploadlist')
myselect.length+=1;
pathliste[pathliste.length]=file 
myselect.options[myselect.options.length-1].innerHTML=file.split('\\')[file.split('\\').length-1];
myselect.options[myselect.options.length-1].value=myselect.options.length-1
myselect.size=myselect.options.length
//document.forms[0].reset()
document.getElementById('hiddenlist').value=pathliste.join(";")
 
fileliste.length=0
		for(i=0;i<pathliste.length;i++){
 
		 fileliste[fileliste.length]=pathliste[i].split('\\')[pathliste[i].split('\\').length-1]
											   }
 
var obj1=document.getElementById('choose')
var obj2=obj1.cloneNode(true)
obj1.parentNode.insertBefore(obj2,obj1)
obj1.parentNode.removeChild(obj1)
 
   }
 
 
 
function deletefile(){
   var indice;
 
 	myselect=document.getElementById('uploadlist')
		if (myselect.options.length==0 || myselect.selectedItem==-1){return false;}
 
       for(i=0;i<myselect.options.length;i++){if(myselect.options[i].selected){indice=myselect.options[i].value;myselect.removeChild(myselect.options[i])}
       }
       myselect.size=myselect.options.length+1;
       pathliste.splice(indice,1)
       fileliste.splice(indice,1)
       document.getElementById('hiddenlist').value= pathliste
 
     }
 
 
function populate(){     
document.getElementById('paths').innerHTML=pathliste.join('\<br\/\>');
 
document.getElementById('files').innerHTML=fileliste.join('\<br\/\>');
}
 
</script>
 
</head>
 
<body>
<form action="" onsubmit="alert(document.getElementById('hiddenlist').value);">
<input type='file' id='choose' onchange='add2list(this.value)' onkeydown="return false;"  />
 
<input type="hidden" name='hiddenlist' id='hiddenlist' />
<select id="uploadlist" ><br/>
</select>
<input type="button" value="supprimer" onclick="deletefile()" />
 
<input type="submit" value="envoyer" />
</form>
<input type="button" value="verifier" onclick="populate()" />
 
<div id ="paths" style="border:solid 1px silver;"></div>
<div id="files" style="border:solid 1px silver;"></div>
 
</body>
 
</html>

**gforce** · 23/03/2007, 16h20

après vérification si j'enlève le reset il ne me vide pas le champ hidden après insertion. sur FF

**SpaceFrog** · 23/03/2007, 16h38

il fait vraiment un cloneNode sous FFX masi pas sous IE ...

alors voilà :

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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
 
<title>Nouvelle page 1</title>
<script type='text/javascript'>
 var pathliste= new Array();
 var fileliste=new Array();
 
function add2list(file){
myselect=document.getElementById('uploadlist')
myselect.length+=1;
pathliste[pathliste.length]=file 
myselect.options[myselect.options.length-1].innerHTML=file.split('\\')[file.split('\\').length-1];
myselect.options[myselect.options.length-1].value=myselect.options.length-1
myselect.size=myselect.options.length
//document.forms[0].reset()
document.getElementById('hiddenlist').value=pathliste.join(";")
 
fileliste.length=0
		for(i=0;i<pathliste.length;i++){
 
		 fileliste[fileliste.length]=pathliste[i].split('\\')[pathliste[i].split('\\').length-1]
											   }
 
var obj1=document.getElementById('choose')
var obj2=document.createElement('input')
obj2.type='file'
obj2.id='choose'
obj2.onchange=function(){add2list(this.value)};
obj2.onkeydown=function(){return false}; 
 
var where=obj1.parentNode
where.removeChild(obj1)
 
 
 
 
where.insertBefore(obj2,where.firstChild)
 
 
   }
 
 
 
function deletefile(){
   var indice;
 
 	myselect=document.getElementById('uploadlist')
		if (myselect.options.length==0 || myselect.selectedItem==-1){return false;}
 
       for(i=0;i<myselect.options.length;i++){if(myselect.options[i].selected){indice=myselect.options[i].value;myselect.removeChild(myselect.options[i])}
       }
       myselect.size=myselect.options.length+1;
       pathliste.splice(indice,1)
       fileliste.splice(indice,1)
       document.getElementById('hiddenlist').value= pathliste
 
     }
 
 
function populate(){     
document.getElementById('paths').innerHTML=pathliste.join('\<br\/\>');
 
document.getElementById('files').innerHTML=fileliste.join('\<br\/\>');
}
 
</script>
 
</head>
 
<body>
<form action="" onsubmit="alert(document.getElementById('hiddenlist').value);">
<input type='file' id='choose' onchange='add2list(this.value)' onkeydown="return false;"  />
 
<input type="hidden" name='hiddenlist' id='hiddenlist' />
<select id="uploadlist" ><br/>
</select>
<input type="button" value="supprimer" onclick="deletefile()" />
 
<input type="submit" value="envoyer" />
</form>
<input type="button" value="verifier" onclick="populate()" />
 
<div id ="paths" style="border:solid 1px silver;"></div>
<div id="files" style="border:solid 1px silver;"></div>
 
</body>
 
</html>

**gforce** · 23/03/2007, 16h52

merci. génial

puis je pousser le vice un peu plus loin en fesant un alert si ils essayent d'uploader un fichier qui est deja dans la liste il faudrait faire le test sur le path comme ça ils peuvent uploader un fichier qui porte le même nom qu'un autre du moment que ce n'est pas au meme niveau.

**SpaceFrog** · 23/03/2007, 17h17

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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
 
<title>Nouvelle page 1</title>
<script type='text/javascript'>
 var pathliste= new Array();
 var fileliste=new Array();
 
function add2list(file){
if(pathliste.join('|').indexOf(file)>-1){alert('dejà selectionné');clearchoose();return false;}
myselect=document.getElementById('uploadlist')
myselect.length+=1;
 
pathliste[pathliste.length]=file 
 
myselect.options[myselect.options.length-1].innerHTML=file.split('\\')[file.split('\\').length-1];
myselect.options[myselect.options.length-1].value=myselect.options.length-1
myselect.size=myselect.options.length
document.getElementById('hiddenlist').value=pathliste.join(";")
 
fileliste.length=0
		for(i=0;i<pathliste.length;i++){
 
		 fileliste[fileliste.length]=pathliste[i].split('\\')[pathliste[i].split('\\').length-1]
	clearchoose()										   }
	}
 
 
function clearchoose(){
var obj1=document.getElementById('choose')
var obj2=document.createElement('input')
obj2.type='file'
obj2.id='choose'
obj2.onchange=function(){add2list(this.value)};
obj2.onkeydown=function(){return false}; 
 
var where=obj1.parentNode
where.removeChild(obj1)
 
 
 
 
where.insertBefore(obj2,where.firstChild)
 
 
   }
 
 
 
function deletefile(){
   var indice;
 
 	myselect=document.getElementById('uploadlist')
		if (myselect.options.length==0 || myselect.selectedItem==-1){return false;}
 
       for(i=0;i<myselect.options.length;i++){if(myselect.options[i].selected){indice=myselect.options[i].value;myselect.removeChild(myselect.options[i])}
       }
       myselect.size=myselect.options.length+1;
       pathliste.splice(indice,1)
       fileliste.splice(indice,1)
       document.getElementById('hiddenlist').value= pathliste
 
     }
 
 
function populate(){     
document.getElementById('paths').innerHTML=pathliste.join('\<br\/\>');
 
document.getElementById('files').innerHTML=fileliste.join('\<br\/\>');
}
 
</script>
 
</head>
 
<body>
<form action="" onsubmit="alert(document.getElementById('hiddenlist').value);">
<input type='file' id='choose' onchange='add2list(this.value)' onkeydown="return false;"  />
 
<input type="hidden" name='hiddenlist' id='hiddenlist' />
<select id="uploadlist" ><br/>
</select>
<input type="button" value="supprimer" onclick="deletefile()" />
 
<input type="submit" value="envoyer" />
</form>
<input type="button" value="verifier" onclick="populate()" />
 
<div id ="paths" style="border:solid 1px silver;"></div>
<div id="files" style="border:solid 1px silver;"></div>
 
</body>
 
</html>

**gforce** · 23/03/2007, 17h35

dernière petit truc. tu ne sais pas comment je pourrais définir une taille fixe pour ma liste? parceque lorsque je met un style sur mon select la taile est ok mais dès que j'ajoute un fichier c'est comme si il y avait un reset sur la taille?

**SpaceFrog** · 23/03/2007, 17h40

j'envoie ou la facture ?...

supprime cette ligne là ...

Code :

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

//myselect.size=myselect.options.length

et rajoute

Code :

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

<select id="uploadlist" size=10><br/>

mais ça c'est niveau maxi super mega noob !!!!

**gforce** · 23/03/2007, 17h46

sorry j' aurais du préciser la taille en largeur.
y a t'il un moyen de calculer la taille d'un fichier en js?

déso mais comme tu te débrouille pas mal et que tu es la

en tout cas 1000 merci

**SpaceFrog** · 23/03/2007, 17h49

colle un

Code :

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

style="width:100px;"

dans le select et profites du temps que je te fais gagner pour aller faire un tour sur les tutos de developpez ...

la taille d'un fichier js ???
tu veux dire quoi par là ?
ouvres ton exploartuer mets le detail d'affichage tu auras la taille ..