Création dynamique pour upload multiples

**SpaceFrog** · 23/09/2009, 11h06

Voici un petit script rapide pour générer dynamiquement des inputs file pour l'upload de plusieurs fichiers.
Fonctionalités
Paramétrage du nombre maximum de fichiers.
Ajout seulement si les précédents sont renseignés.
Possibilité de supprimer un input ajouté

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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
<script type="text/javascript">
countinputs=0
maxinputs=3
 
function aff(obj){
nameok=false;
var saisie=obj.value.replace(/.*\\(.+\.(gif|jpg|jpeg|png))$/i,'$1');
nameok= saisie.match(/^.+\.(gif|jpg|jpeg|png)$/i);
if(!nameok){alert('pas bon le fichier');
             obj.value='';}
obj.parentNode.getElementsByTagName('label')[0].innerHTML= nameok?saisie:'';
authorise(nameok);
}
 
function authorise(valid){
var emptyone=0
var i=0
tabinputs=document.getElementsByName('pic[]');
 
while (tabinputs[i]){
	if (tabinputs[i].value.length==0) {emptyone++;}
 	i++;}
  document.getElementById('add').disabled=(((emptyone==0) && valid) && (countinputs<maxinputs))?false:true;
}
 
function addinput(){
if (countinputs>maxinputs){ alert('maximun atteint')
                    return false;}
var newInputfile=document.getElementById('inputline').cloneNode(true);
newInputfile.removeAttribute('id');
newInputfile.getElementsByTagName('label')[0].innerHTML='';
newInputfile.getElementsByTagName('input')[0].value='';
var kill=document.createElement('img')
kill.src="chemin/vers/petitecroixrouge.png";
kill.style.cursor="pointer";
kill.onclick=function(){ this.parentNode.parentNode.removeChild(this.parentNode);
                         countinputs--; 
                         authorise(true);}
newInputfile.appendChild(kill)
newInputfile.appendChild(document.createElement('br'));
document.getElementById('moreinputs').appendChild(newInputfile);
countinputs++;
authorise(true);
}
 
</script>
</head>
 
<body>
<span id="inputline">
<input style="margin-bottom:2px;" type="file" name="pic[]" size="35"  onchange="aff(this)"> <label></label>
</span>
<input type="button" onclick="addinput()" value="autre photo" id="add" disabled/>
<div id="moreinputs">
</div>
</body>

**andry.aime** · 28/09/2009, 13h14

Mais je pense que tu dois joindre le fichier "petitecroixrouge.png".

Création dynamique pour upload multiples

Contribuez

Discussions similaires

Partager

Partager