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>

créer une liste d'upload

JavaScript

Vue hybride

Discussions similaires

Partager

Partager