Discussion :

[Bovino]

Bon ca va ca va j'ai rien dit

Rassure toi, on ne fait ces remarques uniquement pour que tu sois au courant

J'ai résolus mon problème, est-ce le code peut intéresser quelqu'un, si oui, je le poste.

Oui, ça peut toujours être utile si d'autres se retrouvent dans le même cas

[MichaelVDH]

index.php

Code :

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

1
2
3
4
5
6
 
<script type="text/javascript" src="function.js"></script>
 
<div id="formPhoto"></div>
<div id="previewPhoto"></div>
<iframe width="0px" height="0px" frameborder="0" name="uploadTarget"></iframe>

Explication :
div --> formPhoto : l'endroit ou sera généré le formulaire
div --> previewPhoto : l'endroit ou sera généré les prévisualisation
iframe --> Elle sert à exécuter le script PHP d'upload etc... elle doit porter un nom dans ce cas-ci "uploadTarget"

function.js

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
 
 
window.onload = function(){formPhoto(1)};
function formPhoto(id)
{
var table = document.createElement('table');
table.id = 'tableUp'+id;
table.setAttribute('border','0');
table.setAttribute('cellpadding','0');
table.setAttribute('cellspacing','0');
 
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.setAttribute('action','php/annonce/uploadPhoto.php');
form.setAttribute('method','post');
form.setAttribute('enctype','multipart/form-data');
form.setAttribute('target','uploadTarget');
form.setAttribute('name','form'+id);
 
var input = document.createElement('input');
 
input.setAttribute("type","file");
input.setAttribute("name", "photo"+id);
input.setAttribute("onChange", "uploadPhoto("+id+")");
 
var hiddenInput = document.createElement('input');
hiddenInput.type = 'hidden';
hiddenInput.value = id;
hiddenInput.setAttribute("name","hiddenField");
 
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, erreur)
{
	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[erreur];
}

Explication :
window.onload = function(){formPhoto(1)}; : seul moyen trouvé pour faire fonctionner le script sous IE8

formPhoto(id) --> Génération d'une balise <form> contenant un tableau de 2 colonne, l'un contient l'input (file) et l'autre contiendra le lien vers le fichier uploadé, un champ caché est créé pour permettre de récupérer l'ID du formulaire dans le script de PHP, lorsqu'une image est selectionnée elle appelle la fonction uploadPhoto()

uploadPhoto() --> Celle-ci sert à envoyé le formulaire au script PHP et à placer une image loading

previewPhoto(nPhoto) --> fonction permettant de prévisualiser l'image uploadée en cliquant sur un lien

uploaded(nPhoto, id) --> fonction indiquant un lien avec le nom de l'image et son extension et inseré un lien pointant vers previewPhoto, cette fonction est appellé dans le script PHP

errorUpload(id, erreur) --> indique les différentes erreurs, la fonction est appellée dans le script PHP

uploadPhoto.php

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
 
$uploadDir = '/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'];
$imageLink = $uploadDir.''.$filename;
 
//$imageSize = getimagesize($imageLink);
//print_r($imageSize);
 
//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 'soucis 2';
				echo '<script language="javascript">window.top.errorUpload("'.$id.'","2");</script>';
 
		}
	}
	else
	{
			echo 'soucis 1';
			echo '<script language="javascript">window.top.errorUpload("'.$id.'","1");</script>';
	}
}
else
{
			echo 'soucis 0';
			echo '<script language="javascript">window.top.errorUpload("'.$id.'","0");</script>';
}

Ce script n'est pas totalement terminé, il faut encore renommer les fichier uploadé pour eviter les doublons et resizer avec proportion les preview.

Voilà j'espere que se sera utile à quelqu'un

[Eric2a]

IExplorer apprécie que les éléments soient appendés * au TBODY...

* pas vérifier l'existence du verbe

J'ai résolus mon problème, est-ce le code peut intéresser quelqu'un

Oui toujours. Pour avoir du code IE... compatible DOM.

[NoSmoking]

J'ai réussis à récupérer ma variable du formulaire dynamique dans la page "test.php" seul chose qui change comparativement à avant, j'ai appellé ma fonction dans le body avec onload

Si vous comprenez n'hésitez pas pcq je suis largué la

Imaginons que tu construises une maison, ici le document, qui a reçu l'agrément de l'architecte, validation W3C en somme, le maître d'oeuvre, le moteur de browser, planifie sa tâche en fonction des éléments qui lui parviennent et demande à ses ouvriers, le moteur du navigateur de s'occuper de tout cela.

Si au départ il est prévu un plan de travail dans la cuisine alors no problem tout est prévu ils savent comment procéder, mais si soudain tu envoies de nouvelles consignes aux ouvriers pour mettre en place ledit plan de travail que tu avais oublié alors là cela va dépendre du maître d'oeuvre et de ses ouvriers.

Tout le monde s'active, c'est le chantier complet pour livrer la maison le plus rapidement possible et "on vient me foutre le souk!" s'écrit le maître d'ouvrage, "bon on connait, c'est plein de gens comme cela sur la toile on maîtrise, je re-hiérarchise les travaux, on re-fixe les priorités" etc...et ça roule.

Ca c'est le meilleur des cas dans l'autre cas la perturbation peut engendrer des conflits divers, untel qui a une ID s'impose devant celui dont on ne se rappellera pas le NOM, enfin, ce sont des professionnel, alors ils s'en sortent mais que ce fut dur!

Le seul problème c'est que certaines fois il y a des effets de bord, qui il est vrai la plupart du temps ne sont pas gênant car le maître d'ouvrage les a corrigé de lui même, c'est il en voit de toutes les couleurs même des canapés dans les WC il paraît entre autre armoire dans les escaliers, il n'y a qu'a demander à Validator le guerrier.

Il aurait préféré de loin qu'on lui fasse ajouter le plan de travail une fois la maison terminée, plus de petit tracas à gérer, il a le temps de s'organiser tranquillement, c'est cela le onload.

Tout cela pour dire pourquoi ajouter un élément quand on sait que l'on va le mettre quoiqu'il arrive, autant le prévoir de manière traditionnelle tout de suite, cela ne prend pas bien de temps et évites des remues méninges.

Ce scénario n'est que pure fiction

[MichaelVDH]

Je te remercis pour cette jolie histoire lol

J'ai compris ou tu souhaitais en venir

[ABCIWEB]

Oui c'est certain que tu aurais pu faire beaucoup plus simple, mais au passage tu auras appris (c'est le même principe) comment ajouter un champ de téléchargement dans un formulaire avec javascript et ça c'est pratique

Sinon concernant le onload il vaut mieux utiliser une fonction qui ajoute la fonction dans la liste des évènements onload, du genre :

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
function formPhoto (id) {
//...
}
 
function AddLoad(func)
{
        if (window.addEventListener)
                {
                        window.addEventListener("load", func, false);
                }
        else if (document.addEventListener)
                {
                        document.addEventListener("load", func, false);
                }
        else if (window.attachEvent)
                {
                        window.attachEvent("onload", func);
                }
}
 
//chargment onload de la fonction formPhoto avec son paramètre
AddLoad(function(){formPhoto(1))});

ça évite des conflits avec d'éventuelles autres fonctions javascript qui feraient appel à cet évènement.

[MichaelVDH]

Merci ABCIWEB en réalité au départ je ne savais justement pas comment automatiquement ajouter un champ formulaire avec etc..., donc je ne voyais que la possibilité d'utiliser les DOM maintenant oui c'est certain qu'il y avait plus simple, mais je relativise en me disant que je comprends bcp mieux le fonctionnement des DOM

Pour ce qui est de ton script, c'est surement une question bete, mais je ne comprends pas ta condition, c-à-d comment il sait quelle condition executer ? Est ce que par exemple je dois le définir dans <body onload="AddLoad(function(){formPhoto(1))});" ?

Bete question dans un soucis de perfectionnement est-ce que mon script vous parait correct (sécurité, syntaxe, methode) ?

[ABCIWEB]

AddLoad(function(){formPhoto(1))}); remplace le onload ='formPhoto(1)' placé dans la balise body ou le window.onload = function(){formPhoto(1)}; placé entre les balises "<script>"

Mais bon si tu refais ton code d'une façon plus classique (et simple) c'est à dire un formulaire standard en html avec juste une fonction javascript pour ajouter un champ de téléchargement, tu n'auras pas besoin d'utiliser l'évènement onload dans ce cas. Et d'ailleurs avec l'expérience que tu viens d'acquérir ça ne devrait pas te prendre beaucoup de temps

Le "onload" gardes-le pour de meilleurs occasions

[MichaelVDH]

Justement j'ai commencé avec un formulaire classique ou je faisais un

Code :

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

1
2
 
document.getElementById('formPhoto').innerHTML = <form name= form"+id+" action=uploadPhoto.php>

La soucis était justement que je n'arrivais pas à ajouter dans mon tableau un champ en plus d'ou cette méthode complexe

[NoSmoking]

La soucis était justement que je n'arrivais pas à ajouter dans mon tableau un champ en plus d'ou cette méthode complexe

la méthode n'est pas complexe mais requière justement de la méthode et une bonne définition de son besoin.

[ABCIWEB]

Je l'ai déjà donné le code que j'utilise pour ajouter un champ de téléchargement Dans ma fonction, idChamp c'est l'id d'un "div" ou d'un "p" existant à l'intérieur du formulaire. Et c'est tout !

Sinon tu te complique la vie avec des tableaux pour un simple formulaire. La bonne pratique est d'utiliser les css avec des div etc. et de réserver les tableaux pour présenter des données tabulaires.