créer une liste d'upload

Version imprimable

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

22/03/2007, 15h23
gforce

créer une liste d'upload

bonjour,

quelqu'un à t'il déjà réalisé en javascript une liste d'upload de fichier.
c'est à dire que l'utilisateur pour ajouter un fichier doit cliquer sur ajouter et la liste ce met à jour. Une fois que la liste ets complète il clique sur upload et les fichier présent dans la liste sont uploadé via php par ex.

merci
22/03/2007, 15h25
SpaceFrog

un input type file couplé avec un input type hidden que l'on incrémente du nom du fichier selectionné avec séparateur ...
22/03/2007, 15h36
gforce

oui mais l'utilisateur devrait garder un visuel des fichiers de la liste
22/03/2007, 15h50
SpaceFrog

alors bascule les dans un select avec un size égal à son length en multiple et selectionne toues les options sur le onsublimt du form ...

il y a des bug d'affichage avec explorrer et comment pourrais je récupérer le chemin complet des fichiers à uploader

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
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<script type="text/javascript">
	<!-- 
 
var counter = 1;
var changing = 1;
 
 
 
 
function handleEnter (field, event) {
                var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
                if (keyCode == 13) {
                        var i;
                        for (i = 0; i < field.form.elements.length; i++)
                                if (field == field.form.elements[i])
                                        break;
                        i = (i + 1) % field.form.elements.length;
                        field.form.elements[i].focus();
                        return false;
                }
                else
                return true;
        }
 
 
function removesourcefile()
{
        id = document.getElementById('sourcefilelist')[document.getElementById('sourcefilelist').selectedIndex].value;
        if (document.getElementById('sourcefilelist').selectedIndex > -1){
                document.getElementById(id).parentNode.removeChild(document.getElementById(id));
                document.getElementById('sourcefilelist')[document.getElementById('sourcefilelist').selectedIndex] = null;
        }
}
 
 
 
function addsourcefile(id)
{
 
    var input = document.createElement('INPUT');
        input.setAttribute('type', 'file');
        input.setAttribute('name', 'sourcefile[]' );
        input.setAttribute('id','S' + (counter + id));
        input.onchange = new Function("addsourcefile(this.id)");
        input.onkeypress = new Function("handleEnter(this, event)");
        input.style.width = '71px';
        input.style.position='relative';
        input.style.left = '-5pt';
 
        input.size = document.getElementById(id).size;
 
                var insertHere = document.getElementById(id);
                        insertHere.parentNode.insertBefore(input,insertHere);
 
                document.getElementById(id).style.visibility = "hidden";
                document.getElementById(id).style.display='none';
 
		var filename = document.getElementById(id).value;
		newfilename = filename.substr(filename.lastIndexOf('\\'), filename.length);
		if (newfilename.length == 1)
		{
			newfilename = filename.substr(filename.lastIndexOf('\/'), filename.length);
			if (newfilename.length == 1)
	                {
				newfilename=filename;
			}
		}
		filename=newfilename;
                document.getElementById("sourcefilelist")[document.getElementById("sourcefilelist").length] =
                        new Option(filename ,id);
 
 
                counter ++;
}
 
 
	//-->
</script>
</head>
<body>
<input type='file' name='sourcefile[]' id="0" onchange='addsourcefile(0)' />
		<select id="sourcefilelist" name="sourcefilelist" size="5" width="300" style="width: 30%">
		</select><br />
		<input type="button" value="Delete" onclick="removesourcefile()">
</body>
</html>

heu oui ...
on peut le faire sans avoir à invoquer la théorie de la relativité ;)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script type='text/javascript'>
 
function add2list(file){
myselect=document.getElementById('uploadlist')
myselect.length+=1;
 
document.getElementById('hiddenlist').value+=file+";"
myselect.options[myselect.options.length-1].innerHTML=file.split('\\')[file.split('\\').length-1];
myselect.size=myselect.options.length
}
 
</script>
 
</head>
 
<body>
<form action="" onsubmit="alert(document.getElementById('hiddenlist').value);">
<input type='file' onchange='add2list(this.value)' /><br/>
<input type="hidden" id='hiddenlist' />
<select id="uploadlist" multiple><br/>
<input type="submit" value="envoyer" />
</form>
</body>

22/03/2007, 17h11
SpaceFrog

oui et reste juste à faire un explode sur le point virgule en ayant recupéré la valeur de l'input hidden coté php ...
22/03/2007, 17h17
gforce

et dans ta logique un bouton pour supprimer un fichier?
22/03/2007, 17h39
gforce

très propre ton code. je ne comprend pas tout. et pour deleter de la liste? la balise select ne dois pas être fermée? un petit truc qui serait aussi c'est lorsque le fichier a été ajouté a la liste celui-ci s'efface dans le champ file

realtivement simplement:

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
 
<script type='text/javascript'>
 
function add2list(file){
myselect=document.getElementById('uploadlist')
myselect.length+=1;
 
document.getElementById('hiddenlist').value+=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
}
 
function deletefile(){
   var indice;
   var liste = document.getElementById('hiddenlist').value.split(';')
 	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;
       liste.splice(indice,1)
       document.getElementById('hiddenlist').value= liste
 
     }
 
</script>
 
</head>
 
<body>
<form action="" onsubmit="alert(document.getElementById('hiddenlist').value);">
<input type='file' onchange='add2list(this.value)' /><br/>
<input type="hidden" id='hiddenlist' />
<select id="uploadlist" >
</select><br/>
<input type="button" value="supprimer" onclick="deletefile()" />
 
<input type="submit" value="envoyer" />
</form>
</body>

oui tu as entièrement raison pour la balise fermante du select !

ha j'avais pas vu le coup de l'input file qui se vide ...
suffit de faire un reste sur le form ...
attention toutefois si tu as d'autres champs dasn le form ...

là j'ai collé un width parceque du coup il sert à rien

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
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
 
<title>Nouvelle page 1</title>
<script type='text/javascript'>
 
function add2list(file){
myselect=document.getElementById('uploadlist')
myselect.length+=1;
 
document.getElementById('hiddenlist').value+=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()
}
 
function deletefile(){
   var indice;
   var liste = document.getElementById('hiddenlist').value.split(';')
 	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;
       liste.splice(indice,1)
       document.getElementById('hiddenlist').value= liste
 
     }
 
</script>
 
</head>
 
<body>
<form action="" onsubmit="alert(document.getElementById('hiddenlist').value);">
<input type='file' onchange='add2list(this.value)' style="width:0px;" /><br/>
<input type="hidden" id='hiddenlist' />
<select id="uploadlist" ><br/>
<input type="button" value="supprimer" onclick="deletefile()" />
 
<input type="submit" value="envoyer" />
</form>
</body>
 
</html>

22/03/2007, 17h55
gforce

ok merci. je vais analyser ça demain
23/03/2007, 10h05
gforce

tu as oublié de mettre l'attribut name au champ hidden.

serait il possible de créer 2tableaux, un contenant les path réel des fichiers et l'autre juste les noms de ceux-ci pour l'afficher dans le récapitulatif sans avoir tout le chemin. peut être avec lastindexOf(//) ?

une chose qui serai bien aussi si tu sais c'est ajouter un paramètre ou deux a la fonction se qui permettrait de faire plusieurs listes d'upload en gardant qu'une seul définition de fonction. seul les noms de champs changerait

thx
23/03/2007, 10h25
SpaceFrog

pour le name du champs hidden je sais c'est pas très w3c ... il a un id ? tu ne le recupères pas coté serveur ?

Pour les tableauxx tu as tout ... les text des options du select sont les noms des fichier et dasn l'array liste tu as la liste complète de paths ...

pour le reste j'avoue ne pas saisir l'ergonomie ... pourquoi plusieurs listes d'upload ?
Sinon c'est tout à fait réalisable ...
23/03/2007, 10h33
gforce

pour récupérer via php on utilise $_POST['field'] et dans le formulaire c'est avec l'attribut name="field". l'id ne sert à rien en php.

Pour l'ergonomie ne t'en fait pas...
23/03/2007, 10h35
SpaceFrog

oui bon ben rajoute juste un id ... :aie:
23/03/2007, 10h40
gforce

je n'arrive pas a récupérer le nom des options dans un tableau :cry:

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
<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]
											   }
   }
 
 
 
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' onchange='add2list(this.value)' style="width:0px;" /><br/>
<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, 11h28
gforce

oui c'est bon sauf qu'il faudrait que les tableau soir inséré dans un input hidden chacun comme ça je sais les récupérer en php.

ro je suis vraiment une daube en js :yaisse2:

pour effacer le champ file après insertion dans la liste j'ai mis cette ligne a la fin de la fonction add2list.
elle fonctionne sur ff mais pas sur IE. Tu sais peut etre pourquoi? pcq t'on reset m'efface tout champs...

Code:

document.getElementById('file_field').value="";
23/03/2007, 11h47
SpaceFrog

non l'input file ne doit pas être accessible!! Pour des raisons évidentes de sécurité ...

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