JS : Upload de multiples fichiers via une page HTML

Version imprimable

Bonjour à tous,

j'ai une page upload en HTML , et je voudrais que via cette page je pourrais envoyer multiples fichiers a la fois ( selectionner plusieurs fichiers et les envoyer simultanément ) via un javascript,

le code de la page HTML:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <html> <head> <META http-equiv=Content-Type content="text/html; charset=utf-8"> <title> Plate Forme d'Echange </title> </head> <BODY TEXT="#000099" BGCOLOR="#FFFFFF" LINK="#9999CC" > <A name="index"> </A> <CENTER> </CENTER> </CENTER> <FORM name="send" method="POST" enctype="multipart/form-data"> <font face="Comic Sans MS"> Upload a file:<BR> <b>Local file</b> </font> <INPUT name="file" type=file> <INPUT type=submit value="Upload"> </FORM> <CENTER> <BR> <BR> </CENTER> </body> </html>
Merci d'avance,

Cordialement,

02/01/2007, 17h08
SpaceFrog

à part un champs hidden dasn lequel tu concatènes les files ...
02/01/2007, 17h11
titexe

merci space frog,

comment ajouter ce champ hidden?

je suis qu'un débutant , excusez moi ?

Merci d'avance

C'est ca que tu veux ?

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
<html>
<head>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<title> Plate Forme d'Echange </title>
</head>
<BODY TEXT="#000099" BGCOLOR="#FFFFFF" LINK="#9999CC" >
<A name="index"> </A>
<CENTER>
<iframe name="_hidden" style="display:none; visibility:hidden;" />
    </CENTER>
</CENTER>
<FORM name="send" method="POST" enctype="multipart/form-data" target="_hidden">
<font face="Comic Sans MS">
Upload a file:<BR>
<b>Local file</b> </font>
<INPUT name="file" type=file>
<INPUT type="reset" onclick="this.form.submit();" value="Upload">
</FORM>
<CENTER>
  <BR>
  <BR>
</CENTER>
</body>
</html>

02/01/2007, 17h16
SpaceFrog

???
ça fait quoi ton truc là Frem ?
02/01/2007, 17h21
titexe

Merci space frog,

mais c'est pas ca , le hiden ne réponds pas a mon besoin?

voila un exemple de ce que je veux ;

http://the-stickman.com/web-developm...-file-element/
02/01/2007, 17h28
dingoth

Reprends le code qui se trouve dans l'archive distribuée sur la page que tu désignes :

http://the-stickman.com/files/multiple-file-element.zip

Tu y verras à mon avis beaucoup plus clair ;)
02/01/2007, 17h29
FremyCompany

Citation:

Envoyé par SpaceFrog

???
ça fait quoi ton truc là Frem ?

Et bien tu choisis un fichier, tu envoie le formulaire en cliquant sur le boutton, la réponse se retrouve dans une frame invisible et le formulaire est remis à blanc. Ainsi tu peux envoyer un nouveau fichier sans devoir attendre que le premier fichier que tu as envoyé soit récéptionné par le serveur
02/01/2007, 17h34
titexe

Bonjour Fremy,

oui cette methode me convient aussi,

comment je peux l'integrer dans mon code html,

Merci d'avance,
02/01/2007, 17h36
titexe

Chér SpaceFrog,

j'ai deja testé cet exemple : "multiple-file-element.zip", mais le serveur me retourne toujours une erreur ;

aucun fichier n'est attaché,

Merci encore une fois ,

vraiment je suis bloqué dans ce probléme ca fait longtemps,

Merci d'avance

Regarde, je mets en gras ce qui a été modifié par rapport à ton code :

Code:

1
2
<html><head><META http-equiv=Content-Type content="text/html; charset=utf-8"><title> Plate Forme d'Echange </title></head><BODY TEXT="#000099" BGCOLOR="#FFFFFF" LINK="#9999CC" ><A name="index"> </A><CENTER><iframe name="_hidden" style="display:none; visibility:hidden;"></iframe>    </CENTER></CENTER><FORM name="send" method="POST" enctype="multipart/form-data" target="_hidden"><font face="Comic Sans MS">Upload a file:<BR><b>Local file</b> </font><INPUT name="file" type=file><INPUT type="reset" onclick="this.form.submit();" value="Upload"></FORM><CENTER>  <BR>  <BR></CENTER></body></html>

02/01/2007, 17h54
titexe

Fremy :

une fois que je mets le code que vous m'avez donné ,

la page html est vide,y'a rien qui s'affiche
02/01/2007, 17h57
FremyCompany

Citation:

Envoyé par titexe

Fremy :

une fois que je mets le code que vous m'avez donné ,

la page html est vide,y'a rien qui s'affiche

Code corrigé !
02/01/2007, 18h02
FremyCompany
Reste plus qu'une chose à faire :
Ajouter à ton formulaire une gestion à l'event onsubmit qui ferait ceci :
Code:

1 2 3 // Soit aDiv une DIV HTML vide aDiv.innerHTML="Votre fichier a bien été envoyé !"; setTimeout(function() { aDiv.innerHTML=""; }, 3000);
02/01/2007, 18h07
titexe

pardon FREMY;

ou j'ajoute cette section de gestion de l'event?
02/01/2007, 18h54
FremyCompany

<FORM ... onsubmit='var aDiv=document.getElementById("aDiv"); aDiv.innerHTML="Votre fichier a bien été envoyé !"; setTimeout(function() { aDiv.innerHTML=""; }, 3000);'>

Et ceci la ou tu veux que le message s'affiche :
<DIV id="aDiv"></DIV>