Stocker dans variable php plusieurs valeurs (ajax-php)

Fermé
lerod83 Messages postés 64 Date d'inscription mardi 11 août 2015 Statut Membre Dernière intervention 25 novembre 2019 - Modifié par Chris 94 le 21/06/2016 à 17:06
jordane45 Messages postés 38135 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 13 avril 2024 - 23 juin 2016 à 17:32
Bonjour,

Finalement j’ai arrivé à faire les actions suivantes, merci de vos conseils :
- Uploader multiple images avec Ajax et les envoyer au serveur sans rafraichir la page,
- Supprimer instantanément les images uploadés,
- J’ai pu aussi récupérer sur variable PHP le nom des images uploadés
MAIS j’ai de problème pour les stocker un par un dans plusieurs variables pour envoyer avec le formulaire avec le bouton Submit. J’ai essayé avec la Variable SESSION mais je n’y arrive pas.
Je sollicite vos soutiens chers collegues.
Si vous avez du temps, merci de simuler avec mes scripts ci bas parce que j’ai peut-être pas claire avec l’explication. C'est un peu plus long mais je pense que cela peut, aussi, aider quelqu'un un jour;
Mille merci.


index.php
<?php session_start(); ?>
<html> 
<head>
 <script src="[https://code.jquery.com/jquery-3.0.0.min.js]"></script>
 <style>
 
 .rCol{
  background:;
  /*width:160px;*/
  height:90px;
  overflow:hidden;
 }
 .dialog{
 display:inline-block;
 margin-right:10px;
 }
 .dialog img{
  height:85px;
 }
 .close-classic{
  font-family:arial,sans serif;
  font-size:18px;
  vertical-align:top;
  background:#fff;
  color:#000;
  padding:3px 10px;
  position:relative;
  left:-25px;
  top:0px;
  text-decoration:none;
  transition:all 0.3s;
  z-index:1000;
 }
 .close-classic:hover{
  opacity:0.7;
 }
 
 #uploadPreview1{
  height: 85px;
  margin-top: 3px;
 }
 .fileUpload {
   position: relative;
   overflow: hidden;
   background-color: none;
   height: 85px;display:inline-block;
   text-align: center;
   border-radius: 6px;
 }
 .fileUpload input.upload {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0px 0px 0px 0px;
  padding: 0;
  font-size: 20px;
  cursor: pointer;
  opacity: 0;
  filter: alpha(opacity=0);
  height: 100%;
  text-align: center;
 }
 #prv{
  height:auto; 
  width:auto; 
  float:left; 
  margin-bottom: 28px;
  background:none;
 }
 
 </style>
</head>

<body>

    <script> 

//Fonction upload Javascript et ajax
function submitForm() {

    var fcnt = $('#filecount').val();
    var fname = $('#filename').val();
    var imgclean = $('#file');
    if(fcnt<=5)
    {
    data = new FormData();
    data.append('file', $('#file')[0].files[0]);

    var imgname  =  $('input[type=file]').val();
     var size  =  $('#file')[0].files[0].size;

    var ext =  imgname.substr( (imgname.lastIndexOf('.') +1) );
    if(ext=='jpg' || ext=='jpeg' || ext=='png' || ext=='gif' || ext=='PNG' || ext=='JPG' || ext=='JPEG')
    {
     if(size<=5000000)
     {
    $.ajax({
      url: "ajaximage.php",
      type: "POST",
      data: data,
      enctype: 'multipart/form-data',
      processData: false,  // tell jQuery not to process the data
      contentType: false   // tell jQuery not to set contentType
    }).done(function(data) {
       if(data!='FILE_SIZE_ERROR' || data!='FILE_TYPE_ERROR' )
       {
        fcnt = parseInt(fcnt)+1;
        $('#filecount').val(fcnt);
        var img = '<div class="dialog" id ="img_'+fcnt+'" ><img src="img_uploads/'+data+'" onLoad="return session('+fcnt+')"/><input type="hidden" id="photo_'+fcnt+'" name="photo_'+fcnt+'" value="'+data+'"><a href="#" id="rmv_'+fcnt+'" onclick="return removeit('+fcnt+')" class="close-classic">x</a></div><input type="hidden" id="name_'+fcnt+'" name="name_'+fcnt+'" value="'+data+'">';
        $('#prv').append(img);
        if(fname!=='')
        {
          fname = fname+','+data;
        }else
        {
          fname = data;
        }
         $('#filename').val(fname);
          imgclean.replaceWith( imgclean = imgclean.clone( true ) );
       }
       else
       {
         imgclean.replaceWith( imgclean = imgclean.clone( true ) );
         alert('SORRY SIZE AND TYPE ISSUE');
       }
    });
    return false;
  }//end size
  else
  {
      imgclean.replaceWith( imgclean = imgclean.clone( true ) );//Its for reset the value of file type
    alert('Sorry File size exceeding from 1 Mb');
  }
  }//end FILETYPE
  else
  {
     imgclean.replaceWith( imgclean = imgclean.clone( true ) );
    alert('Sorry Only you can uplaod JPEG|JPG|PNG|GIF file type ');
  }
  }//end filecount
  else
  {    imgclean.replaceWith( imgclean = imgclean.clone( true ) );
     alert('06 photos maximum');
  }
  
}


//suppression de l'image
function removeit (arg) {
       var id  = arg;
       // GET FILE VALUE
       var fname = $('#filename').val();
       var fcnt = $('#filecount').val();
        // GET FILE VALUE
  
       $('#img_'+id).remove();
       $('#rmv_'+id).remove();
       $('#img_'+id).css('display','none');
  
        var dname  =  $('#name_'+id).val();
  alert(dname);
  $.ajax({
          url: 'delete.php',
          type: 'POST',
          data:{'name':dname},
          success:function(a){
            console.log(a);
            }
        });
        fcnt = parseInt(fcnt)-1;
        $('#filecount').val(fcnt);
        var fname = fname.replace(dname, "");
        var fname = fname.replace(",,", "");
        $('#filename').val(fname);
        
    }
 
 //pour stocker dans variable PHP les images uploadé/envoyé au serveur
 function session (arg) {
  var fcnt = $('#filecount').val();
  var id  = arg;
  var Pname  =  $('#photo_'+id).val();
        var dataString = 'Pname=' + Pname;
  alert(Pname);
  $.ajax({

            type: "POST",
            url: "pass_value.php",
            data: {
    sary: Pname,
    cpt: fcnt,
   },
            dataType: 'json',
            cache: false,
            success: function(response) {
    alert(response.message);
   }
        });
    }
    </script>

 
 <?php
 if(isset($_POST['subUpload'])){
  echo $_SESSION['sary'];
  //unset($_SESSION['sary']);
 } ?>
 <form action="" method="POST">
  <input type="text" name="nom"/><br/>
  <input type="text" name="prenom"/><br/>
  <div class="rCol"> 
   <div id ="prv"></div>
   
   <div class="fileUpload"> 
    <span class="custom-span">
     <img id="uploadPreview1" src="../images/img_bouton/add_photo1.GIF"> 
    </span>
    <p class="custom-zpara">Ajouter une photo</p>
    <input type="file" id="file" class="upload" name='file' onChange=" return submitForm();">
    <input type="hidden" id="filecount" value='0'>
   </div>
  </div>
  <input type="hidden" name="myPhoto[]" value="<?php echo 2; ?>"/>
  <input type="submit" name="subUpload" value="Valider"/>
 </form>
 
 
</body>
</html>



ajaximage.php
<?php
$filetype = array('jpeg','jpg','png','gif','PNG','JPEG','JPG');
   foreach ($_FILES as $key )
    {
          $name =time().$key['name'];

          $path='img_uploads/'.$name;
          $file_ext =  pathinfo($name, PATHINFO_EXTENSION);
          if(in_array(strtolower($file_ext), $filetype))
          {
            if($key['name']<1000000)
            {

             @move_uploaded_file($key['tmp_name'],$path);
             echo $name;

            }
           else
           {
               echo "FILE_SIZE_ERROR";
           }
        }
        else
        {
            echo "FILE_TYPE_ERROR";
        }// Its simple code.Its not with proper validation.
 }
?>


delete.php
<?php
session_start();
$path='img_uploads/'.$_POST['name'];

   if(@unlink($path))
   {
     echo "Success";
   }
   else
   {
     echo "Failed";
   }
?>


pass_value.php
<?php 
session_start();
 $_SESSION['isa'] = $_POST['cpt'];
 
 $_SESSION['sary']=$_POST['sary'];
?>


Si vous avez une idée pour une barre de progression aussi.
Merci à tous, en espérant vos suggestion.
A voir également:

1 réponse

jordane45 Messages postés 38135 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 13 avril 2024 4 647
21 juin 2016 à 21:28
Bonjour,

Je ne comprend pas trop ta question (ni le besoin....)
Pourquoi veux tu renvoyer les variables dans ton formulaire ????
Le plus simple serait de faire le traitement DIRECTEMENT lors de l'appel à ton fichier ajax....


Et puis.. si ton but c'est de remplir ton FORM ... tu peux le faire directement dans le SUCCESS de ta fonction d'upload....
Pas besoin de faire appel à un autre script session() .... je n'en comprend pas l'interet ni le besoin;...




0
lerod83 Messages postés 64 Date d'inscription mardi 11 août 2015 Statut Membre Dernière intervention 25 novembre 2019
22 juin 2016 à 11:26
Merci Jordan,
Peut-être que j’ai mal expliqué, en fait c’est que comment récupérer les noms des images uploadés pour les faire insérer à la base de donnée MySQL avec le formulaire tout entier (dans ce script, chaque images uploadé porte toutes un même index (sary >>> $_POST[‘sary’]) et je ne sais pas comment stocker chacune sur variable différente.


Cordialement
Lerod
0
jordane45 Messages postés 38135 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 13 avril 2024 4 647 > lerod83 Messages postés 64 Date d'inscription mardi 11 août 2015 Statut Membre Dernière intervention 25 novembre 2019
22 juin 2016 à 12:43
Donc.. c'est bien ce que je te disais ....

Dans ton fichier ajaximage.php ... tu fais déjà une boucle sur chaque image (pour faire le moveupload...)
C'est DANS cette boucle que tu dois gérer l'insertion en BDD ...
Pas besoin de faire une bidouille avec un autre script..... c'est inutile !
0
lerod83 Messages postés 64 Date d'inscription mardi 11 août 2015 Statut Membre Dernière intervention 25 novembre 2019
22 juin 2016 à 16:05
Eh bien là que je suis bloqué parce que si c'est le cas d'un multiple checkbox envoyé sumultanément on peut les mettre dans un array mais ici, on upload successivement les images et comment les faire distinguer?
0
jordane45 Messages postés 38135 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 13 avril 2024 4 647 > lerod83 Messages postés 64 Date d'inscription mardi 11 août 2015 Statut Membre Dernière intervention 25 novembre 2019
22 juin 2016 à 16:10
Tu fais quoi te ta variable $name ?
$name =time().$key['name'];
0
lerod83 Messages postés 64 Date d'inscription mardi 11 août 2015 Statut Membre Dernière intervention 25 novembre 2019
22 juin 2016 à 17:16
C'est pour donner une valeur à la variable $path:
$path='img_uploads/'.$name;

Avant de faire l'action suivante:
move_uploaded_file($key['tmp_name'],$path);
0