[AJAX] Faire un formulaire d'upoad en utilisant ajax
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:
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:
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:
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.
