Probleme d'upload fichiers div ajax(c urgent)

Fermé
fati123456 Messages postés 10 Date d'inscription vendredi 11 septembre 2009 Statut Membre Dernière intervention 12 septembre 2009 - 11 sept. 2009 à 13:13
fati123456 Messages postés 10 Date d'inscription vendredi 11 septembre 2009 Statut Membre Dernière intervention 12 septembre 2009 - 12 sept. 2009 à 14:23
Bonjour,

Je travaille sur un site dynamique en php.j'ai fait une fonction dans la page index1.php pour afficher les autres pages dans un div dans index1.php,les pages sont bien affichées mais le probleme c'est que j'ai une page ou il y a un formulaire contient une input file pour telecharger des photos,dans la base de donnée, tous les champs sont stockés sauf l'image il ne la prend pas.voila le code de la forme :



<form name="formulaire" method="post" onSubmit="return verification()" action="javascript:ajax('Agenda/creer.php', 'hf', 'post', 'formulaire') ">
<table width="785" border="0" bordercolor="#006699">

<tr>
<td width="122"><span class="Style28">Titre d'évenement</span></td>
<td width="10" class="Style4">:</td>
<td width="266"><label>
<input name="titre" type="text" id="titre" size="30" />
</label></td>
<td width="125"><span class="Style4">Image d'évenement</span></td>
<td width="9"><span class="Style4">:</span></td>
<td width="227">
<input type="hidden" name="MAX_FILE_SIZE" value="250000" />
<input type="file" name="file" size="18" /></td>
</tr>
<tr>
<td valign="top" class="Style4">Ville</td>
<td class="Style4">:</td>
<td><input name="ville" type="text" id="ville" size="30" /></td>
<td><span class="Style4">Pays</span></td>
<td><span class="Style4">:</span></td>
<td><select name="pays" id="pays">
<option value="Andorre">Andorre</option>
<option value="Emirats Arabes Unis">Emirats Arabes Unis</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Albanie">Albanie</option>
<option value="Armenie">Armenie</option>

</select></td>
</tr>
<tr>
<td rowspan="2" valign="top"><span class="Style4">Détails</span></td>
<td rowspan="2" valign="top" class="Style4">:</td>
<td rowspan="2"><label>
<textarea name="detail" cols="27" rows="7" id="detail"></textarea>
</label></td>
<td valign="top"><span class="Style4">Lien d'évenement</span></td>
<td valign="top"><span class="Style4">:</span></td>
<td valign="top"><input name="lien" type="text" id="lien" value="[http://]" size="30" /></td>
</tr>
<tr>
<td valign="top"><span class="Style4">Date d'évenement</span></td>
<td valign="top">:</td>
<td valign="top"><select name="jour" id="jour" autocomplete="off">
<option value="-1">Jour :</option>
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="mois" id="mois" onchange="editor_date_month_change(this, 'birthday_day','birthday_year');" autocomplete="off">
<option value="-1">Mois :</option>
<option value="01">Janvier</option>
<option value="02">Février</option>
<option value="03">Mars</option>
<option value="04">Avril</option>
<option value="05">Mai</option>
<option value="06">Juin</option>
<option value="07">Juillet</option>
<option value="08">Aôut</option>
<option value="09">Septembre</option>
<option value="10">Octobre</option>
<option value="11">Novembre</option>
<option value="12">Décembre</option>
</select>
<span class="Style26">
<select name="annee" id="annee" autocomplete="off">
<option value="-1">
Année
:</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select>
</span></td>
</tr>
<tr>
<td class="Style4"> </td>
<td class="Style4"> </td>
<td><label></label></td>
<td> </td>
<td> </td>
<td><div align="right">

<input type="submit" name="Submit" value="Envoyer" />
</div></td>
</tr>
</table>
</form>

ajax est la fonction qui affiche les pages dans la div:



<script type="text/javascript">
function getFormData(form)
{
var data1 = "";
var form = document.getElementById(form);
var elements = form.elements;
for(var i=0; i<form.length; i++)
{
data1 += elements[i].name + "=" +escape(elements[i].value);
if((i+1)<form.length)
{
data1+="&";
}
}
return data1;
}
function ajax(fichier, div, method, form)
{
var xhr=null;
var data="null";
if(form!="null")
{
if(method=="GET")
{
data=form;
method="POST";
}
else
{
data = getFormData(form);
}
}
// détection du navigateur pour la création de l'objet XMLHttpRequest (soit l'acronyme xhr)
if (window.XMLHttpRequest)
{
xhr = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open( method, fichier, false);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(data);
if (document.getElementById)
{
document.getElementById(div).innerHTML=xhr.responseText;
}
else
{
if (document.layers)
{
document.div.innerHTML=xhr.responseText;
}
else
{
document.all.div.innerHTML=xhr.responseText;
}
}
}
</script>


Si quelqu'un pourras m'aider pour arriver à stocker les images , je serai reconnaissante. Merci en avance.
A voir également:

15 réponses

kij_82 Messages postés 4088 Date d'inscription jeudi 7 avril 2005 Statut Contributeur Dernière intervention 30 septembre 2013 857
11 sept. 2009 à 13:49
Bonjour,

Pourrions nous avoir le code PHP de ton script de traitement 'creer.php' ?
Car à priori, si tu n'arrive pas à récupérer le fichier (l'image), le problème devrait se situer dans ce script.
0
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
11 sept. 2009 à 13:53
je vois deux erreurs:

- il te manque la partie traitement de la réponse Ajax lorsque elle est reçue (on verifie que l'on a bien tout reçu)
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
		if (xhr.status == 200) {
//etc..


- ensuite tu as une erruer de principe:

Ajax permet d'appeler un script php distant sans recharger la page donc sans le submit, hors toi tu as mis ton appel de la fonction ajax dans action="javascript:ajax('Agenda/creer.php', 'hf', 'post', 'formulaire') " donc au moment de l'envoi de la page par le bouton submit

donc ça ne peut pas marcher

remplace ton bouton submit par un type="button" et mets y un onClick="javascript:ajax('Agenda/creer.php', 'hf', 'post', 'formulaire') "
et dans action="..." mets le nom du script qui est censé enregistrer dans la bdd
0
fati123456 Messages postés 10 Date d'inscription vendredi 11 septembre 2009 Statut Membre Dernière intervention 12 septembre 2009
11 sept. 2009 à 14:03
Bonjour kij_82

Voila la page de traitement creer.php

<?php
session_start();
include '../../../../connexion.php';
include '../../../../langues/lang_fr.php';

?>

<style type="text/css">
<!--
a:link {
color: #006699;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #006699;
}
a:hover {
text-decoration: underline;
color: #006699;
}
a:active {
text-decoration: none;
color: #006699;
}
-->
</style>
<?php
$hf=$_SESSION['email2'];
$req = "SELECT id FROM user where email='$hf'";

$res = mysql_query($req);
if ( $res == false )
die (" Erreur dans la requete ");

$n = mysql_num_rows( $res );
$Col1 = " BGCOLOR=\"F8F8FF\"";
$Col2 = " BGCOLOR=\"FFFAF0\"";
$Col = $Col1;
$l = 2;
for ( $i=1 ; $i <= $n ; $i++){
$r = mysql_fetch_row( $res );
$Y = ($i % $l);
if($Y == 0){
$Col = $Col2;
}else
$Col = $Col1;
?>
<?
$hi=$r[0];
?>
<?php
$titre=$_POST['titre'];
$details=$_POST['detail'];
$pays=$_POST['pays'];
$lien=$_POST['lien'];
$lien=$_POST['lien'];
$ville=$_POST['ville'];
$jour=$_POST['jour'];
$mois=$_POST['mois'];
$annee=$_POST['annee'];
$daten=date("Y-m-d");

$date="$annee-$mois-$jour";

$datecreation=date("d-m-Y");
if (isset($_FILES['file'])){
//On récupère les valeurs entrées par l'utilisateur :

/*?>$adresse=$_POST['txtadresse'];
$siteweb=$_POST['txtsite']; <?php */

unset($erreur);
$extensions_ok = array('png', 'gif', 'jpg', 'jpeg','PNG', 'GIF', 'JPG', 'JPEG');
$taille_max = 4000000000;
$dest_dossier = 'Agenda/photosagenda/';
$name=$_FILES['file']['name'];
// utilisez également des slashes sous windows : $dest_dossier = 'd:/damien/photos/';
// vérifications
if( !in_array( substr(strrchr($_FILES['file']['name'], '.'), 1), $extensions_ok))
{
$erreur = '';
}
elseif( file_exists($_FILES['file']['tmp_name'])
and filesize($_FILES['file']['tmp_name']) > $taille_max)
{
$erreur = 'Votre fichier doit faire moins de 4Mo !';
}
// copie du fichier
if(!isset($erreur))
{
$dest_fichier = basename($_FILES['file']['name']);
$img_blob = mysql_escape_string(file_get_contents($_FILES['file']['tmp_name']));
// formatage nom fichier
// enlever les accents
// copie du fichier
move_uploaded_file($_FILES['file']['tmp_name'], $dest_dossier.$dest_fichier);



}

}

if ($date >= $daten){


$sql = "INSERT INTO agenda(`id_agenda`,`titre`,`detail`,`img_agenda`,`pays`,`id_user`,`date_agenda`,`lien`,`date_evenement`,`ville`)VALUES('','$titre','$details','$dest_fichier','$pays','$hi','$datecreation','$lien','$date','$ville')";

/*echo "<script language='javascript'>alert('insertion effectuee');</script>";
echo "<script language='javascript'>document.location.href='confirm.php';</script>";*/
/*on lance la commande (mysql_query) et au cas où,
on rédige un petit message d'erreur si la requête ne passe pas (or die)
(Message qui intègrera les causes d'erreur sql)*/
mysql_query ($sql) or die ('Erreur SQL !'.$sql.'<br />'.mysql_error());
}else
echo "<br><br><font style='font-family:Arial' style='font-size:12px' style='color:#006699'><center>";
echo "Cet évenement est deja passée";
echo "<br><br><a href=\"#\" onClick=\"envoiRequete('Agenda/agenda.php','hf');\" >";
echo 'Retour';
echo "</a></center></font>";



// .......................................................................................




}
?>
0
kij_82 Messages postés 4088 Date d'inscription jeudi 7 avril 2005 Statut Contributeur Dernière intervention 30 septembre 2013 857
11 sept. 2009 à 14:08
Effectivement, Alain n'a pas tord sur ces points.

Mais le gros problème c'est que justement, le script PHP qu'elle appelle via Ajax est celui qui doit faire l'enregistrement.
Ce qui risque de poser problème pour ce qui est du fichier à uploader. Je n'ai jamais fait d'upload via de l'Ajax, mais j'ai trouvé ces deux pages qui semble résoudre le problème :

http://blogs.developpeur.org/cyril/archive/2007/03/24/ajax-et-upload-part-1.aspx

http://www.webtoolkit.info/ajax-file-upload.html

0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
fati123456 Messages postés 10 Date d'inscription vendredi 11 septembre 2009 Statut Membre Dernière intervention 12 septembre 2009
11 sept. 2009 à 14:10
Bonjour Alain_42,

j'ai suivi la procedure que tu as donnée mais ca marche pas, quand j'ai modifié: action="javascript:ajax('Agenda/creer.php', 'hf', 'post', 'formulaire') " par : onclick="javascript:ajax('Agenda/creer.php', 'hf', 'post', 'formulaire') " et action="page de traitement.php"
Lors de remplissage de premier champ il méne vers la page de traitement avant de remplir les champs

Concernant
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
//etc..

j'ai pa bien compris cette partie
0
dsl j'ai pos la rep !
0
fati123456 Messages postés 10 Date d'inscription vendredi 11 septembre 2009 Statut Membre Dernière intervention 12 septembre 2009
11 sept. 2009 à 14:15
Merci kij_82 je vais voir les pages que tu m'as envoyé et j'espere que ca va marcher.
Merci frount de me répondre
0
fati123456 Messages postés 10 Date d'inscription vendredi 11 septembre 2009 Statut Membre Dernière intervention 12 septembre 2009
11 sept. 2009 à 14:38
Quand je fait l'enregistrement d'un enregistrement, il stocke tous les champs dans la base de dn sauf l'image et il me donne cet erreur:

Notice: Undefined variable: dest_fichier in c:\program files\easyphp1-8\www\wall5 sans iframe 07-09\public\users\maboite\agenda\creer.php on line 108
Cet évenement est deja passée

Retour
0
kij_82 Messages postés 4088 Date d'inscription jeudi 7 avril 2005 Statut Contributeur Dernière intervention 30 septembre 2013 857
11 sept. 2009 à 14:48
Oui, ce qui est normal à priori pour la raison suivante :

Dans un formulaire, ton fichier à uploader est envoyé plus ou moins automatiquement, dans le sens où tu n'as pas vraiment besoin de t'en pré occupé en temps que développeur, tu te contente de le réceptionner dans ton script de traitement, chose que tu fais donc.

Le truc, c'est que ton script de traitement n'est pas appelé de manière "naturelle" - si je puis dire. Tu l'appelle depuis un objet XHR, depuis du javascript donc et non via le formulaire directement.

Et tu ne peux pas transmettre ton fichier de la même manière que tu transmets tes variables de type texte.

Bref, autant pour le reste des données, tu peux garder ta manière de faire (qui est la manière standard de passer les valeur au script PHP appellé), mais pour ce qui est de ton fichier à uploader, il faut procéder différemment.

Par contre, oubli les deux liens que j'ai mis plus haut, j'ai lu trop vite, ce sont des "fake" script d'upload Ajax, tout ce qu'il y a d'Ajax dedans c'est un affichage dynamique du statut de l'upload, nous ce qui nous intéresse c'est de transmettre ce fichier via Ajax.


Par contre, ce tutoriel (en anglais, désolé j'ai pas trouvé en francais un truc qui vaille la peine) t'explique tout :)
https://www.valums.com/

0
fati123456 Messages postés 10 Date d'inscription vendredi 11 septembre 2009 Statut Membre Dernière intervention 12 septembre 2009
11 sept. 2009 à 14:52
Ok merci bcp je vais revoir les liens et appliquer le code et je vais voir qu'est que ca donne.Merci bcp encors
0
fati123456 Messages postés 10 Date d'inscription vendredi 11 septembre 2009 Statut Membre Dernière intervention 12 septembre 2009
11 sept. 2009 à 14:58
ok kij_82
0
kij_82 Messages postés 4088 Date d'inscription jeudi 7 avril 2005 Statut Contributeur Dernière intervention 30 septembre 2013 857
11 sept. 2009 à 14:58
J'ai édité mon précédent message, relis la fin (en gras) attentivement ^^
0
fati123456 Messages postés 10 Date d'inscription vendredi 11 septembre 2009 Statut Membre Dernière intervention 12 septembre 2009
11 sept. 2009 à 14:59
Ok je vais le voir tt de suite
0
fati123456 Messages postés 10 Date d'inscription vendredi 11 septembre 2009 Statut Membre Dernière intervention 12 septembre 2009
11 sept. 2009 à 15:07
j'ai telecharger le fichier ajaxupload.3.5.js mais je c pas comment je vais l'utiliser. désolé si je te dérange par mes question
0
fati123456 Messages postés 10 Date d'inscription vendredi 11 septembre 2009 Statut Membre Dernière intervention 12 septembre 2009
12 sept. 2009 à 14:23
Slt,

J'ai tester le code que tu m'a donné mais ca marche pas il ya toujours meme erreur :

Notice: Undefined variable: dest_fichier in c:\program files\easyphp1-8\www\wall\public\users\maboite\agenda\creer.php on line 107
Cet évenement est deja passée

Retour
0