[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="[email protected]" 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

Vue hybride

Discussions similaires

Partager

Partager