Upload d'image avac ajax [Résolu]

alone06 115 Messages postés mardi 9 novembre 2010Date d'inscription 18 mai 2016 Dernière intervention - 16 févr. 2016 à 06:53 - Dernière réponse : alone06 115 Messages postés mardi 9 novembre 2010Date d'inscription 18 mai 2016 Dernière intervention
- 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.
Afficher la suite 

Votre réponse

5 réponses

jordane45 21403 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 17 juin 2018 Dernière intervention - 16 févr. 2016 à 09:45
0
Merci
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/



alone06 115 Messages postés mardi 9 novembre 2010Date d'inscription 18 mai 2016 Dernière intervention - 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
jordane45 21403 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 17 juin 2018 Dernière intervention > alone06 115 Messages postés mardi 9 novembre 2010Date d'inscription 18 mai 2016 Dernière intervention - 16 févr. 2016 à 17:56
Si si... cet exemple fonctionne très bien
alone06 115 Messages postés mardi 9 novembre 2010Date d'inscription 18 mai 2016 Dernière intervention > jordane45 21403 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 17 juin 2018 Dernière intervention - 16 févr. 2016 à 18:12
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
Commenter la réponse de jordane45
alone06 115 Messages postés mardi 9 novembre 2010Date d'inscription 18 mai 2016 Dernière intervention - Modifié par alone06 le 17/02/2016 à 02:40
0
Merci
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
Commenter la réponse de alone06

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.