[AJAX] Un petit formulaire compliqué

**thebarbarius** · 16/02/2011, 18h28

Bonjours a tous.

Voici mon probleme :

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

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

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
 
<?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** · 16/02/2011, 21h46

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** · 17/02/2011, 03h03

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** · 17/02/2011, 06h11

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** · 17/02/2011, 12h01

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

**andry.aime** · 17/02/2011, 12h18

Envoyé par thebarbarius

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

Tu upload ton fichier comment?

**thebarbarius** · 17/02/2011, 13h38

En faite j'ai mon formulaire :

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

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
 
<?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** · 17/02/2011, 13h45

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

**thebarbarius** · 17/02/2011, 14h08

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.