Page 1 sur 3

Upload

Posté : 22 juil. 2005, 10:46
par seinto28
Bonjour à tous, :D

J'ai un formaulaire d'upload d'images mais comme je ne sais pas à l'avance combien d'images seront à uploader, j'aimerais avoir un input type=file et quand celui ci est rempli, un autre s'ouvre en dessous et ainsi de suite mais je ne trouve, j'imagine qu'il faut utiliser du javascript.

Merci d'avance pour votre aide.

edit mere-teresa : Effectivement pour ajouter des formulaires sans rechargement de la page, il y a du Javascript dedans. Donc...hop ! Je le déplace.

Posté : 22 juil. 2005, 10:57
par Guakamol
Oui il s'agit d'executer du code coté client, donc du javascript, a mon avis ton sujet risque d'etre deplacé.

Ceci dit il faut que tu utilise l'attribut OnChange de ta balise <input type="file">

Et que tu cree un fonction javascript qui test ton champ et rajoute a ton formulaire un nouveau champ ... Moins je manipule de javascript et mieux je me porte, c'est certainement le langage qui m'horripile le plus donc je ne peux guere t'aider plus, mais comme je t'ai dit il y a un forum javascript ;)

Posté : 22 juil. 2005, 11:34
par mere-teresa
Pour traiter ton formulaire, tu ne sauras pas à l'avance le nombre de champs : boucle à faire

Posté : 22 juil. 2005, 15:12
par seinto28
(Désolé pour l'erreur de placement).

J'ai suivi vos conseils, j'ai cherché et ma boucle d'upload marche mais pour la fonction javascript et son appel, j'ai un peu du mal!
Mais ça a déja bien avancé, merci beaucoup.

Posté : 22 juil. 2005, 19:52
par Axel
Salut

malgré le fait que le javascript soit horripilant ( ce qui est vrai ), il y a toujours une solution:

en voici une, on va utiliser la propriété innerHMTL des éléments et en particulier sur un div:

1_ créer un DIV vide:

Code : Tout sélectionner

<div name="zone_file" id="zone_file"></div>
2_créer une fonction javascript qui sera appelée sur un onload dans le body:
//on cree un tableau pour récuperer les variables et re-remplir les champs ensuite
resultat = new Array();
function ajout_file(nbchamp){
    // ici on initialise  une variable qui sera le contenu du div
    var contenu="";
		//boucle pour recréer les champs
		for(i=0 ; i < nbchamp; i++){
					if(i == nbchamp-1){
					contenu +='<input type="file" name="fichier'+i+'" value="'+resultat[i]+'" onchange="javascript: resultat['+i+']= this.value; ajout_file('+(nbchamp+1)+')" /><br/>'; //si c'est le dernier champ ajoute la fonction java
					}else{
					contenu +='<input type="file" name="fichier'+i+'" value="'+resultat[i]+'" onchange="javascript: resultat['+i+']= this.value;"/><br/>'; //sinon on ajoute juste le champ
					}
		} 
    //test pour voir ce qu'ecrit la fonction (a effacer ensuite)
    prompt("",contenu);
    //ici on envoie notre contenu dans le div
    document.getElementById('zone_file').innerHTML = contenu ;
}
Bon ça fonctionne pour ajouter les champs et garder les valeurs. Le seul hic que je n'arrive pas à régler:
c'est que j'arrive à introduire le contenu dans l'attribut value de l'input file mais ça n'apparait pas à l'affichage, et ça me fais ch... :evil:

Et là je rejoins Guakamol des fois le javascript on a envie de :tir2:

Posté : 25 juil. 2005, 11:54
par seinto28
Eh bien, merci pour ce code, il est un peu compliqué pour mon niveau. :shock:

Mais j'ai un parse-error, au niveau de la création du tableau resultat (resultat = new Array();).

C'est surement une erreur tres bete mais je debute, je ne la trouve pas.
Je precise que je travail sous php4. :roll:

Posté : 25 juil. 2005, 12:03
par seinto28
ok, je suis tres nul, je n'ai plus l'erreur!

:oops: :oops:

Mais lorsque j'appel la fonction, rien ne s'affiche :

ajout_file();

Posté : 25 juil. 2005, 14:55
par Axel
rien ne s'affiche dans les champs c'est ça?

c'est le problème dont je te parlais, si tu copies le contenu de la fenetre qui s'ouvre (prompt) dans les value des champs select il devrait y avoir le chemin et le nom du fichier choisi non?

Posté : 25 juil. 2005, 15:05
par Invité
quand j'appel la fonction la premiere fois, il n'y a rien.

Voila ce que j'ai fait :

......

?>

<script language=javascript>


<div name=zone_file id=zone_file></div>
//on cree un tableau pour récuperer les variables et re-remplir les champs ensuite
resultat = new Array();
function ajout_file(nbchamp){
.....

.....}

ajout_file();

</script>

<?

.....

Posté : 25 juil. 2005, 15:20
par Axel
pardon c'est moi j'ai oublié de te dire qu'en effet il fallait mettre l'initialisation de la fonction dans le body:

Code : Tout sélectionner

<body onload="javascript: ajout_file(1);">
Désolé :oops:

Posté : 25 juil. 2005, 15:40
par seinto28
Ce n'est pas grave, je suppose que ça doit etre evident.

Je me demandais si eventuellement, je ne pouvais pas récupérer ta page avec cette fonction et son appel, ça me permettrait de voir comment se fait correctement une page.

Voila mon adresse si tu es OK:
[email protected]

Merci pour tout,

Posté : 25 juil. 2005, 16:42
par Axel
voilà mon fichier pour tester le fonctionnement :

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled</title> <script language="JavaScript" type="text/javascript"> <!-- //on cree un tableau pour récuperer les variables et re-remplir les champs ensuite resultat = new Array(); function ajout_file(nbchamp){ // ici on initialise une variable pour le nombre de champ et une variable qui sera le contenu du div var contenu=""; //boucle pour recréer les champs for(i=0 ; i < nbchamp; i++){ if(i == nbchamp-1){ contenu +='<input type="file" name="fichier'+i+'" value="'+resultat[i]+'" onchange="javascript: resultat['+i+']= this.value; ajout_file('+(nbchamp+1)+')" /><br/>'; //si c'est le dernier champ ajoute la fonction java }else{ contenu +='<input type="file" name="fichier'+i+'" value="'+resultat[i]+'" onchange="javascript: resultat['+i+']= this.value;"/><br/>'; //sinon on ajoute juste le champ } } //ici on envoie notre contenu dans le div prompt("",contenu); document.getElementById('zone_file').innerHTML = contenu ; } // --> </script> </head> <body onload="javascript:ajout_file(1);"> <div name="zone_file" id="zone_file"></div> <hr /> </body> </html>
c'est tout ce qui a de plus simple :P

Posté : 25 juil. 2005, 17:09
par seinto28
Vous allez croire que j'en fait expres mais lorsque je copie-colle ton script dans une page (essai.html) et que je l'ouvre, j'ai une petite fentre javascript, type alerte, qui s'ouvre avec un input dans lequel est ecrit :

<input type="file" name="fichier0" value="undefined" onchange="javascript: resultat[0]= this.value; ajout_file(2)" /><br/>

Est-ce normal, car ça e semble pas marcher?

J'ai un peu honte de mon niveau la!!!
:oops: :oops: :oops: :oops: :oops:

PS: si je veux appeler la fonction au milieu d'un formulaire, c'est possible?

Posté : 25 juil. 2005, 17:56
par Axel
regarde dans les messages plus haut :
//test pour voir ce qu'ecrit la fonction (a effacer ensuite)
    prompt("",contenu); 
j'ai fais exprés de mettre cette ligne pour tester si dans l'attribut value du select le chemin et le nom du répertoire sont bien inscrits.
Et en effet ils sont bien rempli mais ils ne sont pas affichés dans les champs. C'est pourquoi il faut valider le formulaire pour voir si les valeurs sont bien enregistrer.
Au pire si il n'y a pas de solution, tu n'as qu'a faire afficher le contenu de value sur une ligne à coté du champ input file


rmq: il faut se rappeler des messages antérieurs avant de poser des questions des fois il y a les réponses. :wink:

Posté : 25 juil. 2005, 18:12
par seinto28
re-PS, je suis désolé, je ne connais pas du tout javascript, je ne pensais pas que tu avais laissé le test.

Mais je ne comprends pas, même en parcourant et en selectionnant une image, je n'ai pas de 2e input qui apparait. c'est du a ce même probleme? :-#