Salut à tous,

J'ai un soucis qui me bloque pas mal et n'étant pas un pro du JS, j'ai du mal à m'en sortir.

Je dois générer un formulaire (file) de manière automatique. Lorsque l'utilisateur, selectionne sa photo, celle-ci s'upload automatique, avec preview etc... lorsque celle-ci est uploadée, il faut qu'un deuxieme champ file apparaisse en dessous, pour ce faire je rappel ma fonction generant le formulaire malheureusement celui-ci ne s'ajoute pas, mais j'ai plus l'impression qu'il remplace celui déjà existant.

Voici mon code :

function formPhoto(id)
{

var table = document.createElement('table');
table.id = 'formUp'+id;
var tr = document.createElement('tr');
var td = document.createElement('td');
td.id = 'formUp'+id;

var td2 = document.createElement('td');
td2.id = 'nameUp'+id;

var form = document.createElement('form');
form.action = 'php/annonce/uploadPhoto.php';
form.method = 'post';
form.enctype = 'multipart/form-data';
form.name = 'form'+id;
form.target = 'uploadTarget';

var input = document.createElement('input');
input.type = 'file';
input.id = 'photo'+id;
input.setAttribute("onChange", "uploadPhoto("+id+")" );

td.appendChild(input);
tr.appendChild(td);
tr.appendChild(td2);
table.appendChild(tr);
form.appendChild(table);
document.getElementById("formPhoto").appendChild(form);
}

Mon problème se situe dans le getElementById, le formulaire ne "s'incrémente" pas, auriez-vous une petite astuce ou une autre solution que le getElementById

Merci beaucoup à vous

On va me prendre prendre pour un fou de parler de ça a chaque fois, mais à tu déja utilisé jQuery ?

Non malheureusement je ne m'y suis pas encore mis et je te cache pas que j'aimerai bien maitriser JS avant d'utiliser un framework

Tu peux utilisé jQuery sans pour autant tout savoir sur le javascript. Il faut savoir maitriser le dom, & le reste devrait aller (pour ma part, c'est ce que j'ai fait)

Malheureusement j'ai commencé mon site sans JQuery donc tout refaire avec ca va pas le faire lol même si pour le moment je suis pas mal bloqué à cause de ca

Je ne saurais t'aider alors .. Je pourrais juste te conseiller de commenter chaque ligne, afin de voir ou se situe ton erreur .. Je rentre de cours, & j'essaie de regarder ça =)

En réalité il n'y a pas d'erreur a proprement parlé dans le code (en tout cas j'espere :-p ) mais je recherche surtout une manière d'affiche le resultat de ma fonction sans qu'il n'efface l'appel précédent de cette même fonction.

En tout cas merci déjà pour ta réponse ;-)

as-tu tenter avec une var globale ?

Perso j'ai pas compris le problème de l'id et du formulaire qui "s'incrémente pas"...

@Cappie : non je n'ai pas tenté avec une var global, tu aurais une idée ?
@Golmote : Je vais tenter de m'expliquer clairement, en fait je genere un formulaire a l'aide d'une fonction, je dois réappeller cette fonction pour qu'elle regenere le meme formulaire mais en ajout du formulaire précédement generé, mon probleme c'est que je ne sais justement pas comment ajouter simplement le formulaire generé car document.getElementById("formPhoto").appendChild(form); n'est pas correct ou ce n'est pas la bonne méthode en tout cas. Ca te semble plus clair ?

Je ne vois pas pourquoi le appendChild ne fonctionnerait pas ?!

(Attention, tu pourrais par contre avoir un conflit entre le nom de la fonction et l'id de l'élément. Par précaution, mieux vaut qu'ils soient différents. )

Oui mais si tu veux pour le generer une fois, ca roule, dès que je fais a nouveau appel à ma fonction, il remplace le formulaire existant par celui qu'il vient de generer et à mon avis je m'y prend mal car je fais à chaque fois un appendChild sur l'id formPhoto, donc ce qu'il faudrait que j'arrive à faire c'est ajouter à formPhoto, les autres formulaires et ca j'ai du mal.

(Et t'es raison j'ai nommé name et id de la même manière, merci :-p )

Pour ceux que ca pourrait intéresser j'ai résolu mon problème et je vous laisse mes sources vu que j'ai un peu ramé pour trouver comment faire un upload d'image en "AJAX"

index.html

<script type="text/javascript" src="functionUpload.js"></script>
<td width="62%" id="formPhoto"><script language="javascript" type="text/javascript">formPhoto(1);</script></td>
<iframe width="0px" height="0px" frameborder="0" name="uploadTarget"></iframe>

functionUpload.js

function formPhoto(id)
{

var table = document.createElement('table');
table.id = 'tableUp'+id;

var tr = document.createElement('tr');
var td = document.createElement('td');
td.id = 'formUp'+id;

var td2 = document.createElement('td');
td2.id = 'fileUp'+id;

var form = document.createElement('form');
form.action = 'php/annonce/uploadPhoto.php';
form.method = 'post';
form.enctype = 'multipart/form-data';
form.name = 'form'+id;
form.target = 'uploadTarget';

var input = document.createElement('input');
input.type = 'file';
input.name = 'photo'+id;
input.setAttribute("onChange", "uploadPhoto("+id+")");

var hiddenInput = document.createElement('input');
hiddenInput.type = 'hidden';
hiddenInput.name = 'hiddenField';
hiddenInput.value = id;

td.appendChild(hiddenInput);
td.appendChild(input);
tr.appendChild(td);
tr.appendChild(td2);
table.appendChild(tr);
form.appendChild(table);
document.getElementById('formPhoto').appendChild(form);

}

function uploadPhoto(id)
{
	document.getElementById("fileUp"+id).innerHTML = "<img src=img/chargeur.gif />Chargement en cours";
	document.forms["form"+id].submit();
}

function uploaded(nPhoto, id)
{
	document.getElementById("fileUp"+id).innerHTML = "<a href=# onclick=previewPhoto('"+nPhoto+"')>"+nPhoto+"</a>";
	document.getElementById("previewPhoto").innerHTML = "<img src=http://localhost/okaz/temp/"+nPhoto+" alt="+nPhoto+" />";
	id++;
	formPhoto(id);
}

function previewPhoto(nPhoto)
{
	document.getElementById("previewPhoto").innerHTML = "<img src=http://localhost/okaz/temp/"+nPhoto+" alt="+nPhoto+" />";
}

function errorUpload(id, code)
{
	var error = new Array ;
 	error[0] = 'Extension du fichier incorrecte';
	error[1] = 'Le fichier est trop gros';
	error[2] = 'Erreur lors du transfert de fichier';
	
	document.getElementById("fileUp"+id).innerHTML = error[code];
}

uploadPhoto.php

$uploadDir = 'd:/public/Okaz/temp/';

$id = $_POST['hiddenField'];
$input = 'photo'.$id;

$filename = $_FILES[$input]['name'];
$extension = strrchr($filename,'.');
$extension=substr($extension,1) ;   
$extension = strtolower($extension);
$size = $_FILES[$input]['size'];


//Limite de taille 250ko
$sizeMax = 256000;

if ($extension == 'png' or $extension == 'jpg' or $extension == 'jpeg' or $extension == 'gif')
{
	if ($size <= $sizeMax)
	{
		$target_path = $uploadDir . basename($_FILES[$input]['name']);
	
		if (@move_uploaded_file($_FILES[$input]['tmp_name'], $target_path))
		{
			echo 'Upload OK';
			echo '<script language="javascript">window.top.uploaded("'.$_FILES[$input]['name'].'","'.$id.'");</script>';
		}
		else
		{
				echo '<script language="javascript">window.top.errorUpload("'.$id.'","2");</script>';

		}
	}
	else
	{
			echo '<script language="javascript">window.top.errorUpload("'.$id.'","1");</script>';
	}
}
else
{
			echo '<script language="javascript">window.top.errorUpload("'.$id.'","0");</script>';
}

Voilà j'espere que cela pourra servir à quelqu'un bien entendu on pourrait faire pas mal d'amélioration

Et merci à tous pour vos conseils