créer une liste d'upload

**gforce** · 22/03/2007, 15h23

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

**SpaceFrog** · 22/03/2007, 15h25

un input type file couplé avec un input type hidden que l'on incrémente du nom du fichier selectionné avec séparateur ...

**gforce** · 22/03/2007, 15h36

oui mais l'utilisateur devrait garder un visuel des fichiers de la liste

**SpaceFrog** · 22/03/2007, 15h50

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

**gforce** · 22/03/2007, 16h12

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

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

**SpaceFrog** · 22/03/2007, 17h06

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

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

**SpaceFrog** · 22/03/2007, 17h11

oui et reste juste à faire un explode sur le point virgule en ayant recupéré la valeur de l'input hidden coté php ...

**gforce** · 22/03/2007, 17h17

et dans ta logique un bouton pour supprimer un fichier?

**gforce** · 22/03/2007, 17h39

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

**SpaceFrog** · 22/03/2007, 17h44

realtivement simplement:

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

**SpaceFrog** · 22/03/2007, 17h48

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 :

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

**gforce** · 22/03/2007, 17h55

ok merci. je vais analyser ça demain

**gforce** · 23/03/2007, 10h05

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

**SpaceFrog** · 23/03/2007, 10h25

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

**gforce** · 23/03/2007, 10h33

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

**SpaceFrog** · 23/03/2007, 10h35

oui bon ben rajoute juste un id ...

**gforce** · 23/03/2007, 10h40

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

**SpaceFrog** · 23/03/2007, 11h10

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

**gforce** · 23/03/2007, 11h28

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

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 :

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

document.getElementById('file_field').value="";

**SpaceFrog** · 23/03/2007, 11h47

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

créer une liste d'upload

JavaScript

Discussions similaires

Partager

Partager