JS : Upload de multiples fichiers via une page HTML

**titexe** · 02/01/2007, 17h55

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 :

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

**SpaceFrog** · 02/01/2007, 18h08

à part un champs hidden dasn lequel tu concatènes les files ...

**titexe** · 02/01/2007, 18h11

merci space frog,

comment ajouter ce champ hidden?

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

Merci d'avance

**FremyCompany** · 02/01/2007, 18h12

C'est ca que tu veux ?

Code HTML :

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

**SpaceFrog** · 02/01/2007, 18h16

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

**titexe** · 02/01/2007, 18h21

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/

**dingoth** · 02/01/2007, 18h28

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

**FremyCompany** · 02/01/2007, 18h29

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

**titexe** · 02/01/2007, 18h34

Bonjour Fremy,

oui cette methode me convient aussi,

comment je peux l'integrer dans mon code html,

Merci d'avance,

**titexe** · 02/01/2007, 18h36

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

**FremyCompany** · 02/01/2007, 18h52

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

Code :

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

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>

**titexe** · 02/01/2007, 18h54

Fremy :

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

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

**FremyCompany** · 02/01/2007, 18h57

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

**FremyCompany** · 02/01/2007, 19h02

Reste plus qu'une chose à faire :
Ajouter à ton formulaire une gestion à l'event onsubmit qui ferait ceci :

Code :

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

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

**titexe** · 02/01/2007, 19h07

pardon FREMY;

ou j'ajoute cette section de gestion de l'event?

**FremyCompany** · 02/01/2007, 19h54

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

JS : Upload de multiples fichiers via une page HTML

JavaScript

Discussions similaires

Partager

Partager