Discussion :

[genesia]

Bonjour,

J'ai un script d'Upload avec une progressbar malheureusement ce script affiche le résultat avec un xhr.responseText et je voudrais qu'il recharge la page avec les infos $_FILES.

ci-joint le formulaire index.php

Code html :

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
<div id="main">
  <form id="uploadForm" action="index.php?lang=<?php echo $lang; ?>" method="POST" enctype="multipart/form-data">
 
      <input id="uploadImg" name="image" type="file" accept=".jpg,.png,.gif,image/png,image/jpg,image/gif">
 
      <input type="submit" name="Submit" value="Charger le fichier">
 
  </form>
  <div id="uploadProgress">
    <h1>Chargement...</h1>
    <div id="uploadProgressBar" class="progressBar"><span style="width: 0%"></span></div>
    <p id="uploadProgressPercent"></p>
  </div>
  <!--uploadProgress-->
  <div id="uploadResult">
    <h1>Resultat</h1>
    <p></p>
  </div>
  <!--uploadResult-->
</div>

le code javascript

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
$(document).ready(function(){
	$("#uploadForm").ajaxForm({
		// attache l'événement au formulaire.
		beforeSend: function(){
			// avant l'envoi du fichier
			$("#uploadProgressPercent").html("Chargement en cours");
			$("#uploadResult").fadeOut(400, function(){
				$("#uploadProgress").fadeIn();
			});
		},
		uploadProgress: function(event, position, total, percent){
			// pendant l'envoi du fichier
			$("#uploadProgressBar > span").width(percent+'%');
			$("#uploadProgressPercent").html(percent+'%');
		},
		success: function(){
			// après l'envoi du fichier
			$("#uploadProgressBar > span").width('100%');
			$("#uploadProgressPercent").html("Chargement terminé");
		},
		complete: function(xhr){
			// l'envoi du fichier est terminé
			$("#uploadResult > div").html(xhr.responseText);
			$("#uploadProgress").fadeOut(400, function(){
				$("#uploadResult").fadeIn();
			});
		}
	});
});

dans cette même page en haut de la page j'ai mis

Code php :

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

$nomPhoto = $_FILES['image']['name'];

et après je traite les infos du fichier uploadé, je ne connais pas encore bien javascript/ajax. je sais qu'il faut mettre responseXML mais je n'arrive pas a le mettre en place correctement.

merci de votre aide, soyez indulgent je débute...

[Watilin]

Bonjour,

On n'a besoin de responseXML que dans le cas où le serveur envoie du XML. Et encore, ça ne marche que quand le XML est bien formé. Personnellement je ne m'en suis jamais servi… responseText est plus souple à bien des égards car on peut y faire passer à peu près tout ce qu'on veut, entre autres du code HTML ou du JSON.

Ton problème n'est pas très clair à cet endroit :

malheureusement ce script affiche le résultat avec un xhr.responseText

mais je devine que ce « résultat » dont tu parles est le code HTML de la page index.php.

Je vais expliquer en quelques mots ce qui se passe avec ton code actuel :
1. L'utilisateur choisit un fichier et l'envoie en cliquant sur le bouton submit.
2. Là, ta fonction ajaxForm prend le relais : l'envoi classique du formulaire est annulé, une requête Ajax est faite à la place.
3. L'adresse utilisée pour la requête est celle de l'action du formulaire, c'est donc la page index.php qui répond.

Ta page index.php doit faire la différence entre un premier accès et une soumission du formulaire. Pour ça tu peux vérifier la présence de $_POST['Submit'] avec isset, ou bien vérifier qu'il y a quelque chose dans le tableau $_FILES avec empty ou count.

Si tu souhaites que ta page envoie une réponse différente pour les requêtes Ajax spécifiquement, il y a aussi une solution : jQuery ajoute automatiquement un en-tête HTTP quand il fait une requête Ajax.

Code en-tête HTTP :

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

X-Requested-With: XMLHttpRequest

Tu peux tester cet en-tête côté serveur :

Code PHP :

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

1
2
3
4
if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) &&
    'XMLHttpRequest' === $_SERVER['HTTP_X_REQUESTED_WITH']) {
  ...
}

[genesia]

Bonjour et merci Watilin,

Ça a fonctionné, je comprend un peu mieux le fonctionnement de l'ajax.

bonne journée.