créer une liste d'upload

Version imprimable

Voir 40 message(s) de cette discussion en une page

23/03/2007, 11h52
gforce

il n' y a aucune solution pour effacer le texte qu'il contient?
23/03/2007, 11h55
SpaceFrog

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
23/03/2007, 11h59
gforce

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
23/03/2007, 12h03
SpaceFrog

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 ?
23/03/2007, 12h17
gforce

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.

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

23/03/2007, 14h03
gforce

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é:P

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.

explication de texte :

Code:

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

23/03/2007, 14h48
gforce

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

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

ce qui donne:

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

23/03/2007, 15h20
gforce

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

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

alors voilà :

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

23/03/2007, 15h52
gforce

:yaisse2: 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.

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

23/03/2007, 16h35
gforce

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?
23/03/2007, 16h40
SpaceFrog

j'envoie ou la facture ?...

supprime cette ligne là ...

Code:

//myselect.size=myselect.options.length

et rajoute

Code:

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

mais ça c'est niveau maxi super mega noob !!!!
23/03/2007, 16h46
gforce

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

en tout cas 1000 merci:king:
23/03/2007, 16h49
SpaceFrog

colle un

Code:

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 ..
23/03/2007, 16h54
gforce

Citation:

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?

:mouarf:
23/03/2007, 16h55
SpaceFrog

rien compris 8O

pour le reset sur lataille c'est weight watchers ...

Voir 40 message(s) de cette discussion en une page