Sujet Précédent Sujet Suivant

Upload d'image avac ajax

Résolu
alone06 Messages postés 115 Date d'inscription mardi 9 novembre 2010 Statut Membre Dernière intervention 18 mai 2016 - 16 févr. 2016 à 06:53
alone06 Messages postés 115 Date d'inscription mardi 9 novembre 2010 Statut Membre Dernière intervention 18 mai 2016 - 17 févr. 2016 à 02:36
Bonjour,
Je me tourne vers vous après avoir chercher la solution à mon soucis pendant un bon moment sans résultat

voila mon soucis :

je voudrais charger une image via un formulaire et ne l'envoyer qu'après le traitement final de tout les autres champs le soucis c'est que quans le traitement se fais le fichier de traitement ne retrouve plus l'image dans le temp.

voila mon script : 

<!DOCTYPE html>
<html lang="fr">
  <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <title></title>

  <!-- ========== Css Files ========== -->
  <link href="css/root.css" rel="stylesheet">
  <link href="css/default.css" rel="stylesheet">
<link rel="shortcut icon" href="../images/favicon.ico" />

  </head>
  <body>
  <!-- Start Page Loading -->
  <div class="loading"><img src="img/loading.gif" alt="loading-img"></div>
  <!-- End Page Loading -->
 <? include "top.php"; ?>

 <? include "menu_g.php"; ?>
 <!-- //////////////////////////////////////////////////////////////////////////// --> 
<!-- START CONTENT -->

<div class="content">

  <!-- Start Page Header -->
  <div class="page-header">
    <h1 class="title">Types et Extras</h1>
      <ol class="breadcrumb">
        <li><a href="main.html">Tableau de bord</a></li>
      
        <li class="active">Extras (Ajout)</li>
      </ol>

    <!-- Start Page Header Right Div -->
    <div class="right">
      <div class="btn-group" role="group" aria-label="...">
        <a href="main.html" class="btn btn-light">Tableau de bord</a>
        <a href="#" class="btn btn-light"><i class="fa fa-refresh"></i></a>
        <a href="#" class="btn btn-light"><i class="fa fa-search"></i></a>
        <a href="#" class="btn btn-light" id="topstats"><i class="fa fa-line-chart"></i></a>
      </div>
    </div>
    <!-- End Page Header Right Div -->

  </div>
  <!-- End Page Header -->

<!-- //////////////////////////////////////////////////////////////////////////// --> 
<!-- START CONTAINER -->
<div class="container-padding">


  <!-- Start Row -->
  <div class="row">

    <!-- Start Panel -->
    <div class="col-md-12">
    <div class="mo ui-tabs ui-widget ui-widget-content ui-corner-all b10" >
		<ul class="mo ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
			<li class="ui-state-default ui-corner-top "><a href="types.html">Types</a></li>
			<li class="ui-state-default ui-corner-top"><a href="extras.html">Extras</a></li>
            <li class="ui-state-default ui-corner-top active"><a>Ajouter un nouvel extra</a></li>
		</ul>
      <!-- Start Row -->
  <div class="row">

    <div class="col-md-12">
      <div class="panel panel-default">

<div id="succ" class="col-sm-12 clearfix" style="display: none;margin-left: 0;text-align: center;">
                      <div class="kode-alert alert1">
<a class="closed" href="#">×</a>
Le nouvel extra a été ajouté avec succès.
</div>

</div>         

            <div class="panel-body">
              <form class="form-horizontal" id="register_form" onsubmit="return false;" method="post" role="form" enctype="multipart/form-data">
<fieldset>
<legend>Informations du nouvel extra : </legend>



                

                <div class="form-group">
                  <label for="Nom" class="col-sm-3 control-label form-label">Nom <span class="text-danger rouge">*</span>: </label>
                  <div class="col-sm-4">
                    <input type="text" class="form-control" id="nom" name="nom">
                  </div>
                  <div class="col-sm-4"><small id="output_checknom"></small></div>
                </div>
            
            <div class="form-group">
                  <label for="Image" class="col-sm-3 control-label form-label">Image <span class="text-danger rouge">*</span>: </label>
                  <div class="col-sm-4" id="rr">
                    <input type="file" class="form-control" id="img" name="img">
                  </div>
                  <div class="col-sm-2" id="ss" style="display:none">
                    <span></span>
                  </div>
                  <div class="col-sm-4" id="tt" style="display:none">
                    <button class="btn btn-default" value="Upload" >envoyer</button>
                    <button type="submit" class="btn btn-default">supprimer</button>
                  </div>
                  <div class="col-sm-3"><small id="output_checkimg"></small></div>
                </div>
            
          
                  
                    
                 
<div id="status" class="col-sm-12 clearfix" style="display: none;margin-left: 0;text-align: center;">
                      <div class="kode-alert alert6">
<a class="closed" href="#">×</a>
<div id="status2">
 Merci de remplir tous les champs.</div>
</div>

</div>          
                       
            <div style="text-align: center;">        
          <button type="submit" class="btn btn-default">Enregistrer</button>
          <a href="extras.html"><button type="button" class="btn btn-default">Annuler</button></a></div>
                


</fieldset>
              </form> 

            </div>

      </div>
    </div>

  </div>
  <!-- End Row -->
    </div>
    </div>
    <!-- End Panel -->






  </div>
  <!-- End Row -->






</div>
<!-- END CONTAINER -->
 <!-- //////////////////////////////////////////////////////////////////////////// --> 


<!-- Start Footer -->
<? include "footer.php"; ?>
<!-- End Footer -->


</div>
<!-- End Content -->
 <!-- //////////////////////////////////////////////////////////////////////////// --> 






<!-- ================================================
jQuery Library
================================================ -->
<script type="text/javascript" src="js/jquery.min.js"></script>

<!-- ================================================
Bootstrap Core JavaScript File
================================================ -->
<script src="js/bootstrap/bootstrap.min.js"></script>

<!-- ================================================
Plugin.js - Some Specific JS codes for Plugin Settings
================================================ -->
<script type="text/javascript" src="js/plugins.js"></script>


<!-- ================================================
Bootstrap Select
================================================ -->
<script type="text/javascript" src="js/bootstrap-select/bootstrap-select.js"></script>

<!-- ================================================
Bootstrap Toggle
================================================ -->
<script type="text/javascript" src="js/bootstrap-toggle/bootstrap-toggle.min.js"></script>
<script type="text/javascript">
				$(document).ready(function(){
					
					$("#register_form input").focus(function(){
						$("#status").fadeOut(800);
					
					$("#status2").fadeOut(800);
					});
					$("#nom").blur(function(){
						
							check_nom();
					});
					$(document).ready(function()
{
					$("#img").change(function(){
						 
							check_img();
					});
					});
					
		
					
					
					
			

function check_nom(){
							$.ajax({
								type: "post",
								url:  "aj-nn.php",
								data: {
									'nom_check' : $("#nom").val()
								},
								success: function(data){
											if(data == "success_nom"){
												$("#output_checknom").html('<img src="img/check.png" class="small_image" alt="" />');
												return true;
											} else {
												$("#output_checknom").css("color", "red").html(data);
											}
										 }
							});
					}	
function check_img(){
							$.ajax({
								type: "post",
								url:  "aj-nn.php",
								data: {
									'img_check' : $("#img").val()
								},
								success: function(data){
											if(data == "success_img"){
												$("#output_checkimg").html('<img src="img/check.png" class="small_image" alt="" />');
												$("#rr").css("display", "none");
												$("#ss").css("display", "block");
												$("#ss").html($("#img").val());
												$("#tt").css("display", "block");
												
												
												return true;
											} else {
												$("#output_checkimg").css("color", "red").html(data);
											}
										 }
							});
					}
							
																
				
				
	
					//Traitement du formulaire 
					$("#register_form").submit(function(){
						
						var status = $("#status");
						var status2 = $("#status2");
						var nom = $("#nom").val();
						var img = $("#img").val();
						var $form = $(this);
                        var formdata = (window.FormData) ? new FormData($form[0]) : null;
                        var data = (formdata !== null) ? formdata : $form.serialize();
						 
						
						
						
						
						

						if(nom == "" ||  img == ""){
							$("#status").css("display", "block");
							status2.html("Veuillez remplir tous les champs").fadeIn(400);
							
							
							
						}  else {	
							$.ajax({
								type: "post",
								url:  "aj-nn.php",
								contentType: false, // obligatoire pour de l'upload
            processData: false, // obligatoire pour de l'upload
			data: data,
								
								
								beforeSend: function(){
										$('#loading').html('<img src="img/loading.gif" alt="Chargement en cours" />');		
												
											},
								success: function(data){
											if(data != "register_success"){
								$("#status").css("display", "block");
							
								
								
												status2.html(data).fadeIn(400);
												$('#loading').html('');
												$("#bRegister").attr("value", "Soumettre");
												$("#bRegister").addClass("btn-primary").css("color", "white");
											} else {
												
			$("#register_form").slideUp();
								
			$("#succ").css("display", "block");
		   	
												
											}
											
		
										 }
							});
						}
					});
					
				
					
				});
			</script>
            
</body>
</html>

et voila le fichier de traitement : 
<?php 

include "functions.php";




if(!empty($_POST['nom_check'])){ 
	
	$nom=htmlspecialchars(ltrim(rtrim($_POST['nom_check'])), ENT_QUOTES);
	
	//Connexion à la base de données
	require "dataconn.php";
	$sql1 = "SELECT id FROM test WHERE nom='$nom'"; 
    $req1 = mysql_query($sql1);  
	
	$res1 = mysql_num_rows($req1);
	
	if($res1!=0)
	

	{
		echo 'Cet extra existe déjà dans notre base de données !';
		exit();
	} else {
		echo 'success_nom';
		exit();
	}
}
if(!empty($_POST['img_check'])){ 
	
	$img=htmlspecialchars(ltrim(rtrim($_POST['img_check'])), ENT_QUOTES);
	
		
	
	
	//Connexion à la base de données
	require "dataconn.php";
	$sql1 = "SELECT id FROM test WHERE img='$img'"; 
    $req1 = mysql_query($sql1);  
	
	$res1 = mysql_num_rows($req1);
	
	if($res1!=0)
	

	{
		echo 'Cet image existe déjà dans notre base de données !';
		exit();
	} else {
		echo 'success_img';
		exit();
	}
}

//Traitement de l'inscription
if(isset($_POST['nom'])){
	include "dataconn.php";
	
	
 $data['file'] = $_FILES;
 $data['text'] = $_POST;
 $nom=$_POST['nom'];
$img=$_FILES['img']['name'];
$sql12 = "SELECT id FROM test WHERE img='$img'"; 
    $req12 = mysql_query($sql12);  
	
	$img_check = mysql_num_rows($req12);
	
	
	
	
$sql13 = "SELECT id FROM test WHERE nom='$nom'"; 
    $req13 = mysql_query($sql13);  
	
	$nom_check = mysql_num_rows($req13);
	

	
	
	
	
	if(empty($nom) || empty($img))
	
	{
		echo "Tous les champs n'ont pas été remplis.";
	} 
else {if($nom_check > 0) {
		echo "Ce nom existe déjà dans notre base de données !";
	}
else {if($img_check > 0) {
		echo "Cette image existe déjà dans notre base de données !";
	}

	
	
	
	
	
	
	
       else {
		
	
		
		 $sql = "
		INSERT INTO `test`(`id`, `nom`, `img`) VALUES ('', '$nom', '$img')";
	
$uploads_dir = $_SERVER['DOCUMENT_ROOT'].'/manage/uploads';	
	
$tmp_name = $_FILES['img']['tmp_name'];
        $name = $_FILES['img']['name'];
		$o=$uploads_dir.'/'.$name;
move_uploaded_file($tmp_name, $o);




			$inser_exec = mysql_query($sql);	
		if ($inser_exec === true) 
             {
			
			echo 'register_success';
			
			
exit();
			}else {echo "Erreur lors de l'enregistrement.<br> ".$sql;
exit();}

		
		
	
	
	}}}
	exit();
}





?>

J'avais lu quelque part qu'il faut une iframe pour l'upload mais je ne sais pas si c'est ça la solution.

Merci d'avance pour votre aide.

2 réponses

Réponse 1 / 2
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 344
16 févr. 2016 à 09:45
Bonjour,


le soucis c'est que quans le traitement se fais le fichier de traitement ne retrouve plus l'image dans le temp.

Sous entendu que sans les autres traitements ton code fonctionne ??

De quels traitements parles tu exactement ? Ceux côtés JS .... ou ceux dans le fichier ajax php ?


Bon... déjà ...
Tu utilises l'ancienne extension mysql ... considérée comme obsolète.
Je t'invite à lire ceci : http://www.commentcamarche.net/faq/43261-php-l-extension-mysql-est-obsolete#top puis à passer à mysqli ou, je préfère, à PDO.

Ensuite... ton fichier ajax php est mal fichu.
Pourquoi charges tu plusieurs fois ton fichier de connexion à la BDD ?? Une seule fois au début de ton script suffit !


Il est également préférable de récupérer "proprement" les variables AVANT de les utiliser.
Pour ça.... tu peux utiliser l'écriture TERNAIRE de la façon suivante 

//Récupération "propre" des variables 
$nom_check = !empty($_POST['nom_check']) ? $_POST['nom_check']: NULL;	
$img_check = !empty($_POST['img_check']) ? $_POST['img_check']: NULL;		
$nom = !empty($_POST['nom']) ? $_POST['nom']: NULL;	

$img = isset($_FILES['img']['name']) ? $_FILES['img']['name']: NULL;
$tmp_name = isset($_FILES['img']['tmp_name']) ? $_FILES['img']['tmp_name']: NULL;


Et enfin... pour ce qui est de l'upload ... pas besoin d'IFRAME ....
Mais voici un exemple complet sur lequel tu peux t'appuyer :
http://chez-syl.fr/2015/02/jquery-uploader-une-image-en-ajax-avec-un-apercu-avant-envoi/



0
alone06 Messages postés 115 Date d'inscription mardi 9 novembre 2010 Statut Membre Dernière intervention 18 mai 2016
16 févr. 2016 à 17:13
Merci Jordane toujours le premier à la rescousse.
Pour ce qui est du reste du code, il fonctionne très bien je sais que je dois m'améliorer mais pour l'instant j'essaie juste de l'adapter pour pouvoir uploader des images.
pour le tuto je l'ai déjà consulté mais j'ai pas pu m'en servir car ce que j'ai mis là c'est juste une petite partie du code j'ai d'autre champs à vérifier et à insérer dans la bd et puisque comme j'ai dis jusqu'à là ce bout de code fonctionnait très bien j'ai pas voulu le changer.
Je m'explique :
dans mon formulaire j'utilise 
<form class="form-horizontal" id="register_form" onsubmit="return false;" method="post" role="form" enctype="multipart/form-data">

alors que dans l'exemple on utilise 
<form id="my_form" method="post" action="process_form.php">

je crains que les autres check ne marchent plus
0
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 344 > alone06 Messages postés 115 Date d'inscription mardi 9 novembre 2010 Statut Membre Dernière intervention 18 mai 2016
16 févr. 2016 à 17:56
Si si... cet exemple fonctionne très bien
0
alone06 Messages postés 115 Date d'inscription mardi 9 novembre 2010 Statut Membre Dernière intervention 18 mai 2016 > jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024
Modifié par alone06 le 16/02/2016 à 18:13
Je sais qu'il fonctionne si on le prend comme c'est mais moi je dois l'adapter et ne plus passer par process_form.php mais faire les traitement sur aj-nn.php et alors ne pas passer par action="" car si c'est le cas les autres traitement ne se feront plus (je crois)
-Pour l'extension mysql, je suis entrain de passer à PDO merci pour le conseil
0
Réponse 2 / 2
alone06 Messages postés 115 Date d'inscription mardi 9 novembre 2010 Statut Membre Dernière intervention 18 mai 2016
Modifié par alone06 le 17/02/2016 à 02:40
Voila après presque 4 jours dessus, je viens de trouver une solution qui marche et en meme adapté à mon script.
Honnetemenet je ne vois toujours pas ou etait mon erreur mais au moins j'en ai profité pour passer en PDO
voila la solution qui marche si quelqu'un avait le meme soucis. 
<!DOCTYPE html>
<html lang="fr">
  <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <title></title>

  <!-- ========== Css Files ========== -->
  <link href="css/root.css" rel="stylesheet">
  <link href="css/default.css" rel="stylesheet">
<link rel="shortcut icon" href="../images/favicon.ico" />

  </head>
  <body>
  <!-- Start Page Loading -->
  <div class="loading"><img src="img/loading.gif" alt="loading-img"></div>
  <!-- End Page Loading -->
 <? include "top.php"; ?>

 <? include "menu_g.php"; ?>
 <!-- //////////////////////////////////////////////////////////////////////////// --> 
<!-- START CONTENT -->

<div class="content">

  <!-- Start Page Header -->
  <div class="page-header">
    <h1 class="title">Types et Extras</h1>
      <ol class="breadcrumb">
        <li><a href="main.html">Tableau de bord</a></li>
      
        <li class="active">Extras (Ajout)</li>
      </ol>

    <!-- Start Page Header Right Div -->
    <div class="right">
      <div class="btn-group" role="group" aria-label="...">
        <a href="main.html" class="btn btn-light">Tableau de bord</a>
        <a href="#" class="btn btn-light"><i class="fa fa-refresh"></i></a>
        <a href="#" class="btn btn-light"><i class="fa fa-search"></i></a>
        <a href="#" class="btn btn-light" id="topstats"><i class="fa fa-line-chart"></i></a>
      </div>
    </div>
    <!-- End Page Header Right Div -->

  </div>
  <!-- End Page Header -->

<!-- //////////////////////////////////////////////////////////////////////////// --> 
<!-- START CONTAINER -->
<div class="container-padding">


  <!-- Start Row -->
  <div class="row">

    <!-- Start Panel -->
    <div class="col-md-12">
    <div class="mo ui-tabs ui-widget ui-widget-content ui-corner-all b10" >
  <ul class="mo ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
   <li class="ui-state-default ui-corner-top "><a href="types.html">Types</a></li>
   <li class="ui-state-default ui-corner-top"><a href="extras.html">Extras</a></li>
            <li class="ui-state-default ui-corner-top active"><a>Ajouter un nouvel extra</a></li>
  </ul>
      <!-- Start Row -->
  <div class="row">

    <div class="col-md-12">
      <div class="panel panel-default">

<div id="succ" class="col-sm-12 clearfix" style="display: none;margin-left: 0;text-align: center;">
                      <div class="kode-alert alert1">
<a class="closed" href="#">×</a>
Le nouvel extra a été ajouté avec succès.
</div>

</div>         

            <div class="panel-body">
              <form class="form-horizontal" id="register_form" onsubmit="return false;" method="post" role="form" enctype="multipart/form-data">
<fieldset>
<legend>Informations du nouvel extra : </legend>



                

                <div class="form-group">
                  <label for="Nom" class="col-sm-3 control-label form-label">Nom <span class="text-danger rouge">*</span>: </label>
                  <div class="col-sm-4">
                    <input type="text" class="form-control" id="nom" name="nom">
                  </div>
                  <div class="col-sm-4"><small id="output_checknom"></small></div>
                </div>
            
            <div class="form-group">
                  <label for="Image" class="col-sm-3 control-label form-label">Image <span class="text-danger rouge">*</span>: </label>
                  <div class="col-sm-4" id="rr">
                    <input type="file" class="form-control" id="img" name="img">
                  </div>
                  <div class="col-sm-2" id="ss" style="display:none">
                    <span></span>
                  </div>
                  <div class="col-sm-4" id="tt" style="display:none">
                    <button class="btn btn-default" value="Upload" >envoyer</button>
                    <button type="submit" class="btn btn-default">supprimer</button>
                  </div>
                  <div class="col-sm-3"><small id="output_checkimg"></small></div>
                </div>
            
          
                  
                    
                 
<div id="status" class="col-sm-12 clearfix" style="display: none;margin-left: 0;text-align: center;">
                      <div class="kode-alert alert6">
<a class="closed" href="#">×</a>
<div id="status2">
 Merci de remplir tous les champs.</div>
</div>

</div>          
                       
            <div style="text-align: center;">        
          <button type="submit" class="btn btn-default">Enregistrer</button>
          <a href="extras.html"><button type="button" class="btn btn-default">Annuler</button></a></div>
                


</fieldset>
              </form> 

            </div>

      </div>
    </div>

  </div>
  <!-- End Row -->
    </div>
    </div>
    <!-- End Panel -->






  </div>
  <!-- End Row -->






</div>
<!-- END CONTAINER -->
 <!-- //////////////////////////////////////////////////////////////////////////// --> 


<!-- Start Footer -->
<? include "footer.php"; ?>
<!-- End Footer -->


</div>
<!-- End Content -->
 <!-- //////////////////////////////////////////////////////////////////////////// --> 






<!-- ================================================
jQuery Library
================================================ -->
<script type="text/javascript" src="js/jquery.min.js"></script>

<!-- ================================================
Bootstrap Core JavaScript File
================================================ -->
<script src="js/bootstrap/bootstrap.min.js"></script>

<!-- ================================================
Plugin.js - Some Specific JS codes for Plugin Settings
================================================ -->
<script type="text/javascript" src="js/plugins.js"></script>


<!-- ================================================
Bootstrap Select
================================================ -->
<script type="text/javascript" src="js/bootstrap-select/bootstrap-select.js"></script>

<!-- ================================================
Bootstrap Toggle
================================================ -->
<script type="text/javascript" src="js/bootstrap-toggle/bootstrap-toggle.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
     
     $("#register_form input").focus(function(){
      $("#status").fadeOut(800);
     
     $("#status2").fadeOut(800);
     });
     $("#nom").blur(function(){
      
       check_nom();
     });
     $(document).ready(function()
{
     $("#img").change(function(){
      //On vérifie si le titre_rss est ok 
       check_img();
     });
     });
     
  
     
     
     
   

function check_nom(){
       $.ajax({
        type: "post",
        url:  "aj-nn.php",
        data: {
         'nom_check' : $("#nom").val()
        },
        success: function(data){
           if(data == "success_nom"){
            $("#output_checknom").html('<img src="img/check.png" class="small_image" alt="" />');
            return true;
           } else {
            $("#output_checknom").css("color", "red").html(data);
           }
           }
       });
     } 
function check_img(){
       $.ajax({
        type: "post",
        url:  "aj-nn.php",
        data: {
         'img_check' : $("#img").val()
        },
        success: function(data){
           if(data == "success_img"){
            $("#output_checkimg").html('<img src="img/check.png" class="small_image" alt="" />');
            $("#rr").css("display", "none");
            $("#ss").css("display", "block");
            $("#ss").html($("#img").val());
            $("#tt").css("display", "block");
            
            
            return true;
           } else {
            $("#output_checkimg").css("color", "red").html(data);
           }
           }
       });
     }
       
                
    
    /* if (response.status == 'success') {
   form.slideUp();
  }
  form.after('<div class="form-success alert-' + response.status +'">' + response.message +'</div>');
  form.find('.form-success').slideDown();*/
 
     //Traitement du formulaire d'inscription
     $("#register_form").submit(function(){
      
      var status = $("#status");
      var status2 = $("#status2");
      var nom = $("#nom").val();
      var img = $("#img").val();
      var $form = $(this);
                        var formdata = (window.FormData) ? new FormData($form[0]) : null;
                        var data = (formdata !== null) ? formdata : $form.serialize();
       
      
      
      
      
      //var terms_conditon_field = $("#terms_conditon_field").val();
      //var newsletter = $("#newsletter").val();
      

      if(nom == "" ||  img == ""){
       $("#status").css("display", "block");
       status2.html("Veuillez remplir tous les champs").fadeIn(400);
       
       
       
      }  else { 
       $.ajax({
        type: "post",
        url:  "aj-nn.php",
        contentType: false, // obligatoire pour de l'upload
            processData: false, // obligatoire pour de l'upload
   data: new FormData(this),
        
        
        beforeSend: function(){
          $('#loading').html('<img src="img/loading.gif" alt="Chargement en cours" />');  
            //$("#bRegister").attr("value", "Traitement en cours...");
           },
        success: function(data){
           if(data != "register_success"){
        $("#status").css("display", "block");
       
        
        
            status2.html(data).fadeIn(400);
            $('#loading').html('');
            $("#bRegister").attr("value", "Soumettre");
            $("#bRegister").addClass("btn-primary").css("color", "white");
           } else {
            
   $("#register_form").slideUp();
        
   $("#succ").css("display", "block");
     // window.location = "#"; 
            
           }
           
  //$("#register_form").find('.form-success').slideDown();
           }
       });
      }
     });
     
    
     
    });
   </script>
            
</body>
</html>


et pour le traitement : 
<?php 

include "dataconn2.php";

$nom_check = !empty($_POST['nom_check']) ? $_POST['nom_check']: NULL; 
$img_check = !empty($_POST['img_check']) ? $_POST['img_check']: NULL;  


if(!empty($_POST['nom_check'])){ 
 
 $nom=htmlspecialchars(ltrim(rtrim($_POST['nom_check'])), ENT_QUOTES);
 
 //Connexion à la base de données
 $sql1=$conn->query("SELECT id FROM test WHERE nom='$nom'");
    $sql1->execute();
    $res1 =$sql1->rowCount();
 
 
 
 if($res1!=0)
 

 {
  echo 'Cet extra existe déjà dans notre base de données !';
  exit();
 } else {
  echo 'success_nom';
  exit();
 }
}
if(!empty($_POST['img_check'])){ 
 
 $img=htmlspecialchars(ltrim(rtrim($_POST['img_check'])), ENT_QUOTES);
 
  
 
 
 //Connexion à la base de données
 $sql2=$conn->query("SELECT id FROM test WHERE img='$img'");
    $sql2->execute();
    $res2 =$sql2->rowCount();
 
 
 
 
 if($res2!=0)
 

 {
  echo 'Cette image existe déjà dans notre base de données !';
  exit();
 } else {
  echo 'success_img';
  exit();
 }
}

//Traitement de l'inscription
if(isset($_POST['nom'])){
 
$nom = !empty($_POST['nom']) ? $_POST['nom']: NULL; 

$img = isset($_FILES['img']['name']) ? $_FILES['img']['name']: NULL;
$tmp = isset($_FILES['img']['tmp_name']) ? $_FILES['img']['tmp_name']: NULL;

$sql12=$conn->query("SELECT id FROM test WHERE img='$img'");
    $sql12->execute();
    $img_check =$sql12->rowCount();
 
 

 
 
 
 

$sql13=$conn->query("SELECT id FROM test WHERE nom='$nom'");
    $sql13->execute();
    $nom_check =$sql13->rowCount(); 

 
 
 
 
 if(empty($nom) || empty($img))
 
 {
  echo "Tous les champs n'ont pas été remplis.";
 } 
else {if($nom_check > 0) {
  echo "Ce nom existe déjà dans notre base de données !";
 }
else {if($img_check > 0) {
  echo "Cette image existe déjà dans notre base de données !";
 }

  
 
 
 
 
 
       else {
  

$valid_extensions = array('jpeg', 'jpg', 'png', 'gif', 'bmp'); // valid extensions
$path = 'uploads/'; // upload directory


  
 // get uploaded file's extension
 $ext = strtolower(pathinfo($img, PATHINFO_EXTENSION));
 
 // can upload same image using rand function
 $final_image = $img;
 
 // check's valid format
 if(in_array($ext, $valid_extensions)) 
 {     
  $path = $path.strtolower($final_image); 
   
  if(move_uploaded_file($tmp,$path)) 
  {
$req = $conn->prepare("INSERT INTO `test`(`id`, `nom`, `img`) VALUES (:id, :nom, :img)");
   $inser_exec = $req->execute(array(
            "id" => '', 
            "nom" => $nom,
            "img" => $img
            ));  
    
   
 
  if ($inser_exec === true) 
             {
   
   echo 'register_success';
   
   
exit();
   }else {echo "Erreur lors de l'enregistrement.<br> ";
exit();}   
   
   
  }
 } 
 else 
 {
  echo 'invalid file';
 }
 
  
   

  
  
 
 
 }}}
 exit();
}





?>

Bien sur il faut encore le peaufiner et traiter les cas d'erreurs d'upload, mais l'essentiel pour moi était d'uploader l'image.
Merci encore pour les conseils jordane
0

Discussions similaires

comment ajouter ajax control toolkit
cs_faridas -
Grafritz -

16 réponses
Ajax et ASP.NET/C# passage de paramètre
cs_eddynamique -
yann_lo_san -

7 réponses
AjaxControlToolkit non reconnu sans erreur
premiumbfd -
premiumbfd -

4 réponses
Ajax liste deroulante qui alimente plusieurs champs texte
alone06 -
alone06 -

31 réponses
Récuperer un résultat en AJAX
FlasherBoy -
mightteam -

5 réponses
Rejoignez-nous