Un petit formulaire compliqué

[thebarbarius]

Bonjours a tous.


Voici mon probleme :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
 
<script type="text/javascript" src="ajax.js"></script>
 
<form methode="POST">
<input type="text" name="pseudo" />
 
<div id="avatar">
  <form method="post" enctype="multipart/form-data" action="new_list.php">
<p>
<input type="file" name="fichier" size="30">
<input type="submit" name="upload" value="Uploader" onClick="go()">
</p>
</form>
</div>
 
<input type="submit" value="valider" />
</form>

ajax.js

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
// JavaScript Document
 
			function getXhr(){
                                var xhr = null; 
				if(window.XMLHttpRequest) // Firefox et autres
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
				else { // XMLHttpRequest non supporté par le navigateur 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
                                return xhr;
			}
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function go(){
				var xhr = getXhr();
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('livre').innerHTML = leselect;
					}
				}
 
				xhr.open("POST","new_upload.php",true);
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 
				sel = document.getElementById('avatar');
				idauteur = sel.options[sel.selectedIndex].value;
				xhr.send("idAuteur="+idauteur);
			}

et le script qui gere l'upload :
upload.php

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
25
26
27
28
29
30
31
32
33
34
35
 
<?php
 
if( isset($_POST['upload']) ) // si formulaire soumis
{
    $content_dir = ''; // dossier où sera déplacé le fichier
 
    $tmp_file = $_FILES['fichier']['tmp_name'];
 
    if( !is_uploaded_file($tmp_file) )
    {
        exit("Le fichier est introuvable");
    }
 
    // on vérifie maintenant l'extension
    $type_file = $_FILES['fichier']['type'];
 
    if( !strstr($type_file, 'jpg') && !strstr($type_file, 'jpeg') && !strstr($type_file, 'bmp') && !strstr($type_file, 'gif') )
    {
        exit("Le fichier n'est pas une image");
    }
 
    // on copie le fichier dans le dossier de destination
    $name_file = $_FILES['fichier']['name'];
 
    if( !move_uploaded_file($tmp_file, $content_dir . $name_file) )
    {
        exit("Impossible de copier le fichier dans $content_dir");
    }
		?>
        	<input type="text" value="<?php echo $_FILES['fichier']['name']; ?>" />
        <?php
}
 
?>

En faite j'aimerai que lorsqu'on clique sur l'upload de photo , sa transform ma div avatar par le contenu de upload.php.

Tous sa en faite, pour envoyé d'abord l'images sur le serveur, et ajouté un nouveau input avec l'adresse de l'image ainsi uploadé

[andry.aime]

Bonsoir,

Des choses que je ne comprend pas:
1- C'est un div qui a l'id avatar mais pas un select, donc pas d'options ni de selectedIndex.
2-

sel = document.getElementById('avatar');
idauteur = sel.options[sel.selectedIndex].value;

La page appelée dans la fonction AJAX est new_upload.php or que tu nous donnes le code de upload.php
3-

document.getElementById('livre').innerHTML = leselect;

Y a pas de div avec l'id livre dans ton code :

En faite j'aimerai que lorsqu'on clique sur l'upload de photo , sa transform ma div avatar par le contenu de upload.php.

La meilleurs façon c'est d'utiliser un frame cacher pour faire l'upload et une requête AJAX pour vérifier si le fichier est uploader (et/ou d'utiliser APC pour voir la progression).

Tous sa en faite, pour envoyé d'abord l'images sur le serveur, et ajouté un nouveau input avec l'adresse de l'image ainsi uploadé

Pourquoi

A+.

[thebarbarius]

Oui desolé c'est un de mes anciens script quej servais, que je oublié de modifier les nom et d'adapter.

Bah en gros je veux que quand j'envoie le formulaire sa umpload l'image (avatar) et que via ajax ma div avatar soit changé par le contenu de la page upload.php.

[andry.aime]

Envoyé par andry.aime

La meilleurs façon c'est d'utilisé un frame cacher pour faire l'upload et une requête AJAX pour vérifier si le fichier est uploader (et/ou d'utiliser APC pour voir la progression).

[thebarbarius]

Non merci je n'utilise pas de frame ni de iframe

[andry.aime]

Envoyé par thebarbarius

Non merci je n'utilise pas de frame ni de iframe

Tu upload ton fichier comment?

[thebarbarius]

En faite j'ai mon formulaire :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<script type="text/javascript" src="ajax.js"></script>
 
<form methode="POST">
<input type="text" name="pseudo" />
 
<div id="avatar">
  <form method="post" enctype="multipart/form-data" action="new_list.php">
<p>
<input type="file" name="fichier" size="30">
<input type="submit" name="upload" value="Uploader" onClick="go()">
</p>
</form>
</div>
 
<input type="submit" value="valider" />
</form>

Et lorsqu'on appui sur envoyer le formulaire, je souhaiterai qua ma div avatar soit remplacé par le contenu de cette page :

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
25
26
27
28
29
30
31
32
33
34
35
 
<?php
 
if( isset($_POST['upload']) ) // si formulaire soumis
{
    $content_dir = ''; // dossier où sera déplacé le fichier
 
    $tmp_file = $_FILES['fichier']['tmp_name'];
 
    if( !is_uploaded_file($tmp_file) )
    {
        exit("Le fichier est introuvable");
    }
 
    // on vérifie maintenant l'extension
    $type_file = $_FILES['fichier']['type'];
 
    if( !strstr($type_file, 'jpg') && !strstr($type_file, 'jpeg') && !strstr($type_file, 'bmp') && !strstr($type_file, 'gif') )
    {
        exit("Le fichier n'est pas une image");
    }
 
    // on copie le fichier dans le dossier de destination
    $name_file = $_FILES['fichier']['name'];
 
    if( !move_uploaded_file($tmp_file, $content_dir . $name_file) )
    {
        exit("Impossible de copier le fichier dans $content_dir");
    }
		?>
        	<input type="text" value="<?php echo $_FILES['fichier']['name']; ?>" />
        <?php
}
 
?>

[Bovino]

Il n'est pas possible de transmettre des fichiers via une requête AJAX.

[thebarbarius]

Bon je vais illustrer mieux ne plus j'ai fait une faute.

En faite le formulaire se passe en 2 etape :
- 1 - On choisis sa photo et on l'envoie
- 2 - On complete le reste du formulaire et on valide.

En gros il y a 2 formulaire.

Si je pense que c'est possible, parcque je veux que quand on clique sur le button envoyer du formulaire, sa lance un fonction javascript qui charge ma page du traitement d'upload (transmission par post) et qui par la meme occsion retournera sur mon formulaire non plus un deuxieme formulaire mais juste un input avec le lien de l'image ce qui me permettra de completer le deuxieme formulaire, et d'inscrire le lien de l'image dans LA BDD.


Je pense que c'est fesable.

[andry.aime]

Envoyé par thebarbarius

En faite le formulaire se passe en 2 etape :
- 1 - On choisis sa photo et on l'envoie

Pas possible via AJAX , il faut que tu utilises un frame cacher pour uploader le fichier si tu ne veux pas recharger la page en entière.

[thebarbarius]

Ok je veux bien te croire.

Sinon est ce possible de charger une image via le bouton parcourir, et d'inserer le lien de l'images dans la BDD ?

[Bovino]

Non plus.

[thebarbarius]

Et comment les gens s'y prennent alors ?

[andry.aime]

Envoyé par andry.aime

Pas possible via AJAX , il faut que tu utilises un frame cacher pour uploader le fichier si tu ne veux pas recharger la page en entière.

Sinon avec un flash.