[AJAX] Faire un formulaire d'upoad en utilisant ajax

**arnaudtchana** · 05/07/2014, 13h26

Salut et merci d'avance pour votre disponibilité ;

Je veux faire un formulaire d'upload mais j'ai quelques petits soucis. En fait, j'ai fait mon formulaire en html et je veux passer mon formulaire via la méthode FormData et passer ma page php qui gère l'upload via l'objet xhr.open. Mais je sais pas trop quoi mettre dans l'attribut action de ma balise <form>. Encore que je veux rester sur la même page. voici mes codes.

Page html :

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
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
76
77
78
79
80
81
82
 
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="menu.js"></script>
<script type="text/javascript" src="ajax.js"></script>
<meta charset="utf-8" />
		<link rel="stylesheet" href="style.css"/>
 
		<title>site images</title>
	</head>
 
	<body>
 
	<?php include("tete.inc.php") ?>
 
	<!-- ici votre formulaire correspondant à l'upload-->
 
	<div id="formu">
<form id="passage_formulaire" method="POST" action="" enctype="multipart/form-data">
 
<div id="position_form">
	<p>
		<label for="pseudo">Votre Pseudo :</label>
			<input type="text" name="pseudo" id="pseudo" placeholder="arnaud" size="30" maxlength="10" />
 
		<br/>
		<br/>
		<br/>
 
		<label for="mail">E_mail :</label>
			<input type="email" name="mail" id="mail" placeholder="arnaud@gmail.com" size="30" maxlength="40" />
 
		<br/>
		<br/>
		<br/>
 
		<label for="titre">Titre de l'image :</label>
			<input type="text" name="titre" id="titre" placeholder="cocotier" size="30" maxlength="40" />
 
		<br/>
		<br/>
		<br/>
 
 
 
<!-- insertion d'une liste déroulante pour lechoix de lacatégories de l'image à uploader -->
 
		<label for="categorie">Categorie de l'image</label>
			<select name="categorie" id="categorie">
				<option value="voitures">voitures</option>
				<option value="maisons">maisons</option>
				<option value="fleurs">fleurs</option>
				<option value="motos">motos</option>
 
			</select>
 
			<br/>
			<br/>
			<br/>
 
			<label for="description">Description de l'image</label><br />
				<textarea name="description" id="description" rows="5" cols="50"></textarea>
			<br/>
			<br/>
 
 
		<input type="hidden" name="MAX_FILE_SIZE" value="100000"/>
			Fichier : <input id="file" type="file" name="avatar" size="70" required/><br/><br/>
		<input type="submit" name="envoyer" value="Envoyer le fichier" formaction="javascript:ajax();"/>
	</p>
 
</div>
</form>
 
<div class="tumevoispas" id="message">Veuillez patienter...</div>
</div>
 
 
	</body>
 
	</html>

Code JavaScript :

Code javascript :

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
 
function ajax(){
   var xhr=null;
   if (window.XMLHttpRequest) {
      xhr = new XMLHttpRequest();
   }
   else if (window.ActiveXObject)
   {
      xhr = new ActiveXObject("Microsoft.XMLHTTP");
   }
   //on définit l'appel de la fonction au retour serveur
   xhr.onreadystatechange = function() { alert_ajax(xhr); };
   //on affiche le message d'acceuil
   document.getElementById("message").className="tumevois";
   //on appelle le fichier reponse.txt
   document.getElementById('passage_formulaire').submit();
   xhr.open("POST", "http://localhost/Mon_site/upload.php", true);
   var mon_formulaire= document.getElementById('passage_formulaire') ; 
   var form = new FormData(nom_formulaire);
 
   xhr.send(form);
}
 
function alert_ajax(xhr) {
 
   if (xhr.readyState==4)
   {
	alert('la requette est terminée');
	document.getElementById("message").className="tumevoispas";	
   }
}

Script php :

Code php :

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
 
<?php
$dossier = 'upload/'.$_POST["categorie"].'/'; //ici on récupère la catégorie choisie par l'utilisateur afin de sélectionner le bon dossier
$fichier = basename($_FILES['avatar']['name']);
$taille_maxi = 2097152;
//$sous_dossier='\''.$_post['categorie'].'\'/';
$taille = filesize($_FILES['avatar']['tmp_name']);
$extensions = array('.png', '.gif', '.jpg', '.jpeg');
$extension = strrchr($_FILES['avatar']['name'], '.');
//Début des vérifications de sécurité...
 
sleep(7);
if($taille<$taille_maxi)
{
	echo 'la taille du fichier est bonne';	
}
 
if($taille>$taille_maxi)
{
	echo 'le fichier est trop gros';
	echo $erreur= 'Le fichier est trop gros...';
}
if(!in_array($extension, $extensions)) //Si l'extension n'est pas dans le tableau
{
	echo $erreur = 'Vous devez uploader un fichier de type png, gif, jpg, jpeg, txt ou doc...';
}
 
if(!isset($erreur)) //S'il n'y a pas d'erreur, on upload
{
	//On formate le nom du fichier ici...
	$fichier = strtr($fichier,'ÀÁÂÃÄÅÇÈÉÊËÌÍÎÏÒÓÔÕÖÙÚÛÜÝàáâãäåçèéêëìíîïðòóôõöùúûüýÿ','AAAAAACEEEEIIIIOOOOOUUUUYaaaaaaceeeeiiiioooooouuuuyy');
 
	$fichier = preg_replace('/([^.a-z0-9]+)/i', '-', $fichier);
	if(is_uploaded_file($_FILES['avatar']['tmp_name']))
	{
		echo "ce fichier est bien telecharger.";
	}
	// ici je dois faire un autre move pour déplacer le fichier uploadé dans le dossier des images et le rendre directement accessible aux internautes
	if(move_uploaded_file($_FILES['avatar']['tmp_name'], $dossier.$fichier)) //Si la fonction renvoie TRUE, c'est 
	{
		echo 'Upload effectué avec succès !';
	}
	else //Sinon (la fonction renvoie FALSE).
	{
		echo 'Echec de l\'upload ! la fonction move a renvoyée false';
		print_r($_FILES['avatar']['name']);
	}
}
else
{
	echo $erreur='désolé une erreure est survenue';
}
// création du fichier XML
if ( isset($_POST['titre'], $_POST['description']) ) {
        $xml = "<?xml version='1.0' encoding='ISO-8859-1'?>\r\n"
             . '<someimage>'
			 . '<categorie>'. htmlspecialchars($_POST['categorie']) . '</categorie>'
             . '<titre>' . htmlspecialchars($_POST['titre']) . '</titre>'
             . '<description>' . htmlspecialchars($_POST['description']) . '</description>'
             . '</someimage>' ;
        file_put_contents('upload/'.$_POST["categorie"].'/'.$fichier.'.xml', $xml) ; //cette instruction permet de donner au fichier XML le même nom que le fichier image uploadé et les met ainsi dans le même dossier
}
?>

Merci d'avance.

**thelvin** · 07/07/2014, 12h15

Hum, si tu fais de l'AJAX, le principe est bien entendu de ne pas avoir d'attribut action.

Il faut réagir avec JavaScript à un évènement, ici probablement onsubmit.

[AJAX] Faire un formulaire d'upoad en utilisant ajax

AJAX

Discussions similaires

Partager

Partager