Ajout d une barre de progression sur l upload des images [Résolu]

Signaler
Messages postés
3009
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
23 juillet 2021
-
Messages postés
3009
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
23 juillet 2021
-
bonjour
a tous j ai un fichier d upload d image
mais j aurais souhaiter savoir comment venir y intégrer une barre de progression

voici mon fichier
merci
<?php
session_start();

$dossier = 'uploads/';
$fichier = basename($_FILES['file']['name']);
$taille_maxi = 5000000;
$taille = filesize($_FILES['file']['tmp_name']);
$extensions = array('.png', '.PNG', '.gif', '.jpg', '.JPG', '.jpeg', '.JPEG');
$extension = strrchr($_FILES['file']['name'], '.'); 
//Début des vérifications de sécurité...
if(!in_array($extension, $extensions)) //Si l'extension n'est pas dans le tableau
{
     $erreur = 'Vous devez uploader un fichier de type png, gif, jpg, jpeg, txt ou doc...';
}
if($taille>$taille_maxi)
{
     $erreur = 'Le fichier est trop gros...';
}
 if(file_exists("uploads/" . $_FILES["file"]["name"])){
	$erreur = ' L\'image existe déjà.';
 }
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(move_uploaded_file($_FILES['file']['tmp_name'], $dossier . $fichier)) //Si la fonction renvoie TRUE, c'est que ça a fonctionné..
		      {
          echo ' <span style="margin-left:30%;"> <br /> Upload effectué avec succès !  </span>';
		 	include('mabd.php');
		 $req =$bdd->prepare('INSERT INTO galerie_images ( nom_img, nom_min) VALUES ( :nom_img, :nom_min)');
         $req->execute(array(
			'nom_img' => $_FILES["file"]["name"],
			 'nom_min' => $_FILES["file"]["name"]
                                                   ));
     }
     else //Sinon (la fonction renvoie FALSE).
     {
          echo 'Echec de l\'upload !';
     }
}
else
{
     echo $erreur;
}
?>

109 réponses

Messages postés
3009
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
23 juillet 2021
139
je viens d aller voir
et j ai un exemple

$x = $condition ? $trueVal : $falseVal;

//same as:

if ($condition) {
    $x = $trueVal;
} else {
    $x = $falseVal;
}



donc ce que tu me demandes c est d écrire autrement la ligne
$unevariable = condition ? valeur si vraie : valeur si faux ;


if ($condition) {
    $unevariable = 'valeur si vraie';
} else {
    $unevariable = 'valeur si faux';
}


je pense que cela veux dire que si la condition est ok on affiche $unevariable = 'valeur si vraie';
sinon on affiche $unevariable = 'valeur si faux';
Messages postés
33122
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
22 juillet 2021
3 633
Je ne t'ai jamais demandé de réécrire...

Bref...
En espérant que tu aies compris ce qu'est l'écriture ternaire...

En reprenant ces lignes de code :
$pseudo = !empty($_GET['pseudo']) ? $_GET['pseudo']: NULL;
$id = !empty($_GET['id']) ? $_GET['id']: NULL;

if(isset($_GET['pseudo'], $_GET['id'])){
$pseudo = $_GET['pseudo'];
$id = $_GET['id'];
}

Ne penses tu pas que les 4 dernières lignes sont en trop ??



Ensuite.. côté JS
Tu as écrit
function uploadFile(){
  var file = _("photo").files[0];
  // alert(file.name+" | "+file.size+" | "+file.type);
  var pseudo = '<?php echo $pseudo;?>';
  formdata.append("pseudo ", pseudo );
  var id= '<?php echo $id ;?>';
  formdata.append("id", id);
  var formdata = new FormData();
  formdata.append("photo", file);


Sachant que le formadata est initialisé à la ligne
  var formdata = new FormData();

Ne penses tu pas logique de mettre les .append ... APRES ?

Donc

 var pseudo = '<?php echo $pseudo;?>';
  var id= '<?php echo $id ;?>';

console.log('ID',id,'PSEUDO',pseudo); // pour voir si les variables se remplissent bien dans la console;..

function uploadFile(){
  var file = _("photo").files[0];
  // alert(file.name+" | "+file.size+" | "+file.type);
  var formdata = new FormData();

  formdata.append("photo", file);
  formdata.append("pseudo ", pseudo );
  formdata.append("id", id);
Messages postés
3009
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
23 juillet 2021
139
merci pour la correction , comme je t avais dit moi et le javascript on fait a peine connaissance

je te rassure je pense avoir compris ce que veux dire l écriture temaire

pour les 4 lignes de mon codes je vais les enlever
mais une fois le soucis de l upload réglé je reviendrais dessus afin de mieux comprendre ...


pour ce qui est du code
je viens de faire les modifications
mais après avoir vider le cache du navigateur

le message d erreur est toujours présent lors de l essai d un nouvel upload

{"message":"Votre fichier a \u00e9t\u00e9 t\u00e9l\u00e9charg\u00e9 avec succ\u00e8s.>","error":" Erreur dans la requ\u00eate : SQLSTATE[23000]: Integrity constraint violation: 1048 Column 'pseudo' cannot be null"}
Messages postés
33122
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
22 juillet 2021
3 633
Tu as mis le console.log dans ton code tel que moi je l'avais écrit ?
Si oui, qu'est-ce qui s'affiche dans la console ?
Et si tu regardes la ligne Ajax dans la console, qu'y a-t-il dans l'onglet requête ?
À la limite fais un message sans mettre d'image et regarde si dans la ligne Ajax tu vois bien lundi et le pseudo.
Messages postés
3009
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
23 juillet 2021
139
oui oui jordane
j ai fait un copier coller

voici le fichier modifie

<script>function _(el) {
  return document.getElementById(el);
}
   var pseudo = '<?php echo $pseudo;?>';
  var id= '<?php echo $id ;?>';
console.log('ID',id,'PSEUDO',pseudo); // pour voir si les variables se remplissent bien dans la console;..
function uploadFile(){
  var file = _("photo").files[0];
  // alert(file.name+" | "+file.size+" | "+file.type);
  var formdata = new FormData();
  formdata.append("photo", file);
  formdata.append("pseudo ", pseudo );
  formdata.append("id", id);
  
   var ajax = new XMLHttpRequest();
  ajax.upload.addEventListener("progress", progressHandler, false);
  ajax.addEventListener("load", completeHandler, false);
  ajax.addEventListener("error", errorHandler, false);
  ajax.addEventListener("abort", abortHandler, false);
  ajax.open("POST", "cible-fichier.php"); // http://www.developphp.com/video/JavaScript/File-Upload-Progress-Bar-Meter-Tutorial-Ajax-PHP
  //use file_upload_parser.php from above url
  ajax.send(formdata);
}

function progressHandler(event) {
  _("loaded_n_total").innerHTML = "Uploaded " + event.loaded + " bytes of " + event.total;
  var percent = (event.loaded / event.total) * 100;
  _("progressBar").value = Math.round(percent);
  _("status").innerHTML = Math.round(percent) + "% uploaded... please wait";
}

function completeHandler(event) {
  let res = typeof(event.target.responseText)!='undefined' ? JSON.parse(event.target.responseText) : "";
  let message = typeof(res.message)!='undefined' ? res.message : "";
  let error = typeof(res.error)!='undefined' ? res.error : null;
  
  _("status").innerHTML = error ? error : message;
  _("progressBar").value = 0; //wil clear progress bar after successful upload
}
function errorHandler(event) {
  _("status").innerHTML = "Upload Failed";
}
function abortHandler(event) {
  _("status").innerHTML = "Upload Aborted";
}</script>


j ai donc fait un essai avec une image
voila ce que donne la requête et la réponse




et ensuite un upload sans image



Messages postés
33122
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
22 juillet 2021
3 633
Je suppose fortement que tu n'as pas vidé le cache de ton navigateur.
Résultat, le code JS n'a pas été actualisé...

De plus, je voudrais bien avoir le code COMPLET du fichier qui contient le Javascript... ( merci de préciser son nom au passage )
Messages postés
3009
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
23 juillet 2021
139
a chaque foi je vide le cache du navigateur par reflexe je l indique au post 77

voici le code complet

et le nom du fichier est form-fichier.php

<?php 
session_start();
//if(isset($_GET['pseudo'], $_GET['id'])){
//$pseudo = $_GET['pseudo'];
//$id = $_GET['id'];
$pseudo = !empty($_GET['pseudo']) ? $_GET['pseudo']: NULL;
$id = !empty($_GET['id']) ? $_GET['id']: NULL;
//}else
//{
//header('Location:../login-obligatoire-peche-perle.php');
 //       die();}
?>
<!doctype html>
<html lang="en">
   <head>
      <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <!-- Bootstrap CSS -->
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
      <link rel="stylesheet" type="text/css" href="./css/album.css">
      <title>Hello, world!</title>
       	<style>
       @media (min-width: 0px) and (max-width:600px) {
      .container1{width: 85%;    }
 }
        @media (min-width: 601px) and (max-width:2500px) {
      .container1{width: 50%;    }
 }
	 </style>
     </head>
   <!-- fin head -->
   <!-- debut body -->
<body >
      <!-- debut container total-->
      <div class="container">
         <title>phil le perleur</title>
         <!-- debut container entete-->
         <div class="container" style=" max-width: 100%;margin:auto;">
            <!-- debut banniere -->
            <?php include("./include/baniere-peche-perle.php"); ?>
            <!-- fin banniere -->
            <!-- debut menu -->
            <?php include("./include/menu.php"); ?>
            <!-- fin menu -->
         </div>
         <!-- fin container entete-->
	<title> formulaire envoi de fichiers</title>
<div class="container1" style=" max-width: 100%;margin:auto;">
     <form action="cible-fichier.php?pseudo=<?php echo $pseudo;?>&id=<?php echo $id;?>"id="upload_form" enctype="multipart/form-data" method="post">
	  	  <div class="form-group">
        <label for="fileUpload">Fichier:</label>
                 <input type="file" name="photo" id="photo">
        <input type="submit" name="photo" value="Upload"  onchange="uploadFile()">
                  <progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
  <h3 id="status"></h3>
  <p id="loaded_n_total"></p>
        <p><strong>Note:</strong> Veuillez patienter 1 a 2 minutes pour l upload svp</p>
        <p><strong>Note:</strong> Seuls les formats .jpg, .jpeg, .jpeg, .gif, .png sont autorisés jusqu'à une taille maximale de 5 Mo.</p>
		 </div>
    </form>
</div>
<script>function _(el) {
  return document.getElementById(el);
}
   var pseudo = '<?php echo $pseudo;?>';
  var id= '<?php echo $id ;?>';
console.log('ID',id,'PSEUDO',pseudo); // pour voir si les variables se remplissent bien dans la console;..
function uploadFile(){
  var file = _("photo").files[0];
  // alert(file.name+" | "+file.size+" | "+file.type);
  var formdata = new FormData();
  formdata.append("photo", file);
  formdata.append("pseudo ", pseudo );
  formdata.append("id", id);
  
   var ajax = new XMLHttpRequest();
  ajax.upload.addEventListener("progress", progressHandler, false);
  ajax.addEventListener("load", completeHandler, false);
  ajax.addEventListener("error", errorHandler, false);
  ajax.addEventListener("abort", abortHandler, false);
  ajax.open("POST", "cible-fichier.php"); // http://www.developphp.com/video/JavaScript/File-Upload-Progress-Bar-Meter-Tutorial-Ajax-PHP
  //use file_upload_parser.php from above url
  ajax.send(formdata);
}

function progressHandler(event) {
  _("loaded_n_total").innerHTML = "Uploaded " + event.loaded + " bytes of " + event.total;
  var percent = (event.loaded / event.total) * 100;
  _("progressBar").value = Math.round(percent);
  _("status").innerHTML = Math.round(percent) + "% uploaded... please wait";
}

function completeHandler(event) {
  let res = typeof(event.target.responseText)!='undefined' ? JSON.parse(event.target.responseText) : "";
  let message = typeof(res.message)!='undefined' ? res.message : "";
  let error = typeof(res.error)!='undefined' ? res.error : null;
  
  _("status").innerHTML = error ? error : message;
  _("progressBar").value = 0; //wil clear progress bar after successful upload
}
function errorHandler(event) {
  _("status").innerHTML = "Upload Failed";
}
function abortHandler(event) {
  _("status").innerHTML = "Upload Aborted";
}</script>
      <div class="container" style=" max-width: 100%;margin:auto;">
            <!-- debut pied de page-->
            <?php include("./include/pied-de-page.php"); ?>
            <?php include("./include/footer.php"); ?>
         </div>
      </div>
   </body>
   <!-- fin du body-->
</html>
Messages postés
33122
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
22 juillet 2021
3 633
Tu as bien, dans la barre d'adresse de ton navigateur, une variable id et une variable pseudo ?
Messages postés
3009
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
23 juillet 2021
139
Messages postés
33122
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
22 juillet 2021
3 633
Et donc tu as bien vider le cache de ton navigateur ?

Qu'y a-t-il d'autre d'affiche à la console ?
Messages postés
3009
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
23 juillet 2021
139
oui je le fais a chaque fois

je vais le relancer pour voir

voici le message de la requete complet

https://www.cjoint.com/doc/21_05/KEEwwQ748Pt_message.txt

et voici l entête

Messages postés
3009
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
23 juillet 2021
139
avec chrome et firefox c est pareil
Messages postés
33122
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
22 juillet 2021
3 633
Il y a un problème alors...
Car j'ai mis un console.log qui, visiblement, n'apparaît pas dans la console de ton navigateur...
Peux-tu montrer une capture de la console avant même de charger un fichier ?
Messages postés
3009
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
23 juillet 2021
139
bne oui c est bien ce que je me disais


voici donc une copie de la console avant l upload d un fichier

Messages postés
33122
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
22 juillet 2021
3 633

<?php 
session_start();

//Affichage des erreurs PHP ( il faut que je te le remette à chaque fois ??!! )
error_reporting(E_ALL);
ini_set('display_errors', TRUE);
ini_set('display_startup_errors', TRUE);


$pseudo = !empty($_GET['pseudo']) ? $_GET['pseudo']: NULL;
$id = !empty($_GET['id']) ? $_GET['id']: NULL;

if(!$id || !$pseudo ){
  header('Location:../login-obligatoire-peche-perle.php');
  exit;
}
?>
<!doctype html>
<html lang="en">
  <head>
      <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <!-- Bootstrap CSS -->
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
      <link rel="stylesheet" type="text/css" href="./css/album.css">
      <title> formulaire envoi de fichiers</title>
       	<style>
       @media (min-width: 0px) and (max-width:600px) {
          .container1{
            width: 85%;   
          }
       }
        @media (min-width: 601px) and (max-width:2500px) {
          .container1{
              width: 50%;    
          }
       }
	 </style>
  </head>   <!-- fin head -->
 
   <body >   <!-- debut body -->
      <!-- debut container total-->
      <div class="container">
     
       <!-- debut container entete-->
       <div class="container" style=" max-width: 100%;margin:auto;">
          <!-- debut banniere -->
          <?php include("./include/baniere-peche-perle.php"); ?>
          <!-- fin banniere -->
          <!-- debut menu -->
          <?php include("./include/menu.php"); ?>
          <!-- fin menu -->
       </div>
       <!-- fin container entete-->
       
      <div class="container1" style=" max-width: 100%;margin:auto;">
           <form action="cible-fichier.php?pseudo=<?php echo $pseudo;?>&id=<?php echo $id;?>"id="upload_form" enctype="multipart/form-data" method="post">
              <div class="form-group">
                <label for="fileUpload">Fichier:</label>
                <input type="file" name="photo" id="photo">
                <input type="submit" name="photo" value="Upload"  onchange="uploadFile()">
                <progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
                <h3 id="status"></h3>
                <p id="loaded_n_total"></p>
                <p><strong>Note:</strong> Veuillez patienter 1 a 2 minutes pour l upload svp</p>
                <p><strong>Note:</strong> Seuls les formats .jpg, .jpeg, .jpeg, .gif, .png sont autorisés jusqu'à une taille maximale de 5 Mo.</p>
              </div>
          </form>
      </div>
      <div class="container" style=" max-width: 100%;margin:auto;">
          <!-- debut pied de page-->
          <?php include("./include/pied-de-page.php"); ?>
          <?php include("./include/footer.php"); ?>
      </div>
    </div>
    
     <script>
     //--------------------------------------------------------//     
     // ON PLACE LE JAVASCRIPT  JUSTE AVANT  le </body>
     //--------------------------------------------------------//
     
      var pseudo = '<?php echo $pseudo;?>';
      var id= '<?php echo $id ;?>';
      console.log('ID',id,'PSEUDO',pseudo); // pour voir si les variables se remplissent bien dans la console;..

      function _(el) {
        return document.getElementById(el);
      }
        

      function uploadFile(){
        var file = _("photo").files[0];
        var formdata = new FormData();
        formdata.append("photo", file);
        formdata.append("pseudo ", pseudo );
        formdata.append("id", id);
        
        //le temps des tests : 
        alert('pseudo:' + pseudo + '  id: ' + id);
        console.log('ID',id,'PSEUDO',pseudo); // pour voir si les variables se remplissent bien dans la console;..
        
        var ajax = new XMLHttpRequest();
        ajax.upload.addEventListener("progress", progressHandler, false);
        ajax.addEventListener("load", completeHandler, false);
        ajax.addEventListener("error", errorHandler, false);
        ajax.addEventListener("abort", abortHandler, false);
        ajax.open("POST", "cible-fichier.php"); // http://www.developphp.com/video/JavaScript/File-Upload-Progress-Bar-Meter-Tutorial-Ajax-PHP
        //use file_upload_parser.php from above url
        ajax.send(formdata);
      }

      function progressHandler(event) {
        _("loaded_n_total").innerHTML = "Uploaded " + event.loaded + " bytes of " + event.total;
        var percent = (event.loaded / event.total) * 100;
        _("progressBar").value = Math.round(percent);
        _("status").innerHTML = Math.round(percent) + "% uploaded... please wait";
      }

      function completeHandler(event) {
        let res = typeof(event.target.responseText)!='undefined' ? JSON.parse(event.target.responseText) : "";
        let message = typeof(res.message)!='undefined' ? res.message : "";
        let error = typeof(res.error)!='undefined' ? res.error : null;
        
        _("status").innerHTML = error ? error : message;
        _("progressBar").value = 0; //wil clear progress bar after successful upload
      }
      function errorHandler(event) {
        _("status").innerHTML = "Upload Failed";
      }
      function abortHandler(event) {
        _("status").innerHTML = "Upload Aborted";
      }
    </script>
   </body>
   <!-- fin du body-->
</html>

Messages postés
3009
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
23 juillet 2021
139
bonjour jordane
un grand merci pour ce code
mais de nouveau une erreur

j ai donc fait un test j ai remis mon ancien fichier cible
et on a plus d erreur
donc il y a un soucis avec le fichier cible que tu m as refais le code
j ai tente de trouver d ou cela pourrait provenir mais sans succes

voici l ancien fichier
<?php
session_start();

$getpseudo = !empty($_COOKIE['pseudo']) ? $_COOKIE['pseudo'] : NULL;
$pseudo = !empty($_POST['pseudo']) ? $_POST['pseudo']: NULL;
$id = !empty($_POST['id']) ? $_POST['id']: NULL;
$photos = !empty($_FILES["photo"]) ? $_FILES["photo"] : NULL;    








if (!empty($_SESSION['id']) and !empty($_SESSION['pseudo']) or !empty($_COOKIE['pseudo']))
{
    $getpseudo = $_COOKIE['pseudo'];
}
if (isset($_GET['pseudo'], $_GET['id']))
{
    $pseudo = $_GET['pseudo'];
    $id = $_GET['id'];
?>
<!doctype html>
<html lang="en">
   <head>
      <?php include ("include/head.php"); ?>
      <link rel="stylesheet" type="text/css" href="./css/magazine.css">
   </head>
   <!-- fin head -->
   <!-- debut body -->
   <body>
      <!-- debut container total-->
      <div class="container">
         <title>phil le perleur</title>
         <!-- debut container entete-->
         <div class="container" style=" max-width: 100%;margin:auto;">
            <!-- debut banniere -->
            <?php include ("include/baniere-peche-perle.php"); ?>
            <!-- fin banniere -->
            <!-- debut menu -->
            <?php include ("include/menu.php"); ?>
            <!-- fin menu -->
            <!-- fin container entete-->
            <div class="col-sm-12 text-center">
               <!-- debut body --><?php
include ('base.php');
// Vérifier si le formulaire a été soumis
if ($_SERVER["REQUEST_METHOD"] == "POST")
{
    // Vérifie si le fichier a été uploadé sans erreur.
    if (isset($_FILES["photo"]) && $_FILES["photo"]["error"] == 0)
    {
        $allowed = array(
            "jpg" => "image/jpg",
            "JPG" => "image/JPG",
            "jpeg" => "image/jpeg",
            "JPEG" => "image/JPEG",
            "gif" => "image/gif",
            "png" => "image/png",
            "PNG" => "image/PNG"
        );
        $filename = $_FILES["photo"]["name"];
        $filetype = $_FILES["photo"]["type"];
        $filesize = $_FILES["photo"]["size"];
        // Vérifie l'extension du fichier
        $ext = pathinfo($filename, PATHINFO_EXTENSION);
        if (!array_key_exists($ext, $allowed)) die('Erreur : Veuillez sélectionner un format de fichier valide.</br> <a href="javascript:history.back()">Pour recommencer</a>');
        // Vérifie la taille du fichier - 5Mo maximum
        $maxsize = 5 * 1024 * 1024;
        if ($filesize > $maxsize) die('Error: La taille du fichier est supérieure à la limite autorisée.</br> <a href="javascript:history.back()">Pour recommencer</a>');
        // Vérifie le type MIME du fichier
        if (in_array($filetype, $allowed))
        {
            // Vérifie si le fichier existe avant de le télécharger.
            if (file_exists("uploads/" . $_FILES["photo"]["name"]))
            {
                echo $_FILES["photo"]["name"] . ' existe déjà.</br> <a href="javascript:history.back()">Pour recommencer</a>';
            }
            else
            {
                move_uploaded_file($_FILES["photo"]["tmp_name"], "uploads/" . $_FILES["photo"]["name"]);
                echo '<style="font-size:22px; margin-left:20%; margin-top:90px;text-align: center;">Votre fichier a été téléchargé avec succès.>';
                $req = $bdd->prepare('INSERT INTO galerie_images (pseudo, id_img, nom_img, nom_min) VALUES (:pseudo, :id_img, :nom_img, :nom_min)');
                $req->execute(array(
                    'pseudo' => $pseudo,
                    'id_img' => $id,
                    'nom_img' => $_FILES["photo"]["name"],
                    'nom_min' => $_FILES["photo"]["name"]
                ));
            }
        }
        else
        {
            echo 'Error: Il y a eu un problème de téléchargement de votre fichier. Veuillez réessayer.</br> <a href="javascript:history.back()">Pour recommencer</a>';
        }
    }
    else
    {
        echo "Error: " . $_FILES["photo"]["error"];
    }
}
}
else
{
    header('Location:../login-obligatoire-peche-perle.php');
    die();
}
?>
            </div>
            <div class="col-sm-12 text-center">
               <img src="uploads/<?php echo $filename; ?>" height="200"  /> 
               <form method="post" action="traite.php?nom_img=<?php echo $filename; ?>&id=<?php echo $id; ?>&pseudo=<?php echo $pseudo; ?>">
                  <p>  
                  <div class="form-group ">
                     <div class="col-sm-12 text-center">
                        <label for="commentaire"> Désirez-vous ajouter un commentaire (150 caratères max) ?<br /> Il apparaîtra dans une note sous votre image. Merci.<br /> cela est falcultatif.   </label><br />
                        <textarea name="commentaire" id="commentaire"  rows="3"class="form-control justify-content-center" style="width:200px;margin:auto;"></textarea><br />
                     </div>
                  </div>
                  <input type="submit" name="submit" value="publier commentaire" />
                  </p>
                  <br />
                  <a href="detail.php?pseudo=<?php echo $pseudo; ?>&id=<?php echo $id; ?>"><span style="font-size:24px;  text-align:center;"> Ajout de votre photo sans commentaire.</span> </a>
               </form>
            </div>
            <!-- debut pied de page-->
            <?php include ("include/pied-de-page.php"); ?>
         </div>
      </div>
      <?php include ("include/footer.php"); ?>
   </body>
   <!-- fin du body-->
</html>


et voici celui que tu avais redigè
<?php
// Démarrage SESSION
session_start();

//Connexion à la bdd
require_once 'base.php';

// Variables/constantes...
  $allowed = array(
            "jpg" => "image/jpg",
            "JPG" => "image/JPG",
            "jpeg" => "image/jpeg",
            "JPEG" => "image/JPEG",
            "gif" => "image/gif",
            "png" => "image/png",
            "PNG" => "image/PNG"
        );

$res = array();// variable qui contiendra les infos à retourner au script JS
        
// récupération PROPRE des variables de type "array" AVANT de les utiliser  (j'ai l'impression de radoter vu le nombre de fois que je t'ai déjà donné ce genre de code !!!! )
$getpseudo = !empty($_COOKIE['pseudo']) ? $_COOKIE['pseudo'] : NULL;
$pseudo = !empty($_POST['pseudo']) ? $_POST['pseudo']: NULL;
$id = !empty($_POST['id']) ? $_POST['id']: NULL;
$photos = !empty($_FILES["photo"]) ? $_FILES["photo"] : NULL;    


// Vérifier si le formulaire a été soumis
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // Vérifie si le fichier a été uploadé sans erreur.
    if ($photos && $photos["error"] == 0){
      
        $filename = $photos["name"];
        $filetype = $photos["type"];
        $filesize = $photos["size"];
        // Vérifie l'extension du fichier
        $ext = pathinfo($filename, PATHINFO_EXTENSION);
        if (!array_key_exists($ext, $allowed)) {
          $err = 'Erreur : Veuillez sélectionner un format de fichier valide.</br> <a href="javascript:history.back()">Pour recommencer</a>';
        }
        // Vérifie la taille du fichier - 5Mo maximum
        $maxsize = 5 * 1024 * 1024;
        if ($filesize > $maxsize){
          $err = 'Error: La taille du fichier est supérieure à la limite autorisée.</br> <a href="javascript:history.back()">Pour recommencer</a>';
        
        // Vérifie le type MIME du fichier
        if (in_array($filetype, $allowed)) {
            // Vérifie si le fichier existe avant de le télécharger.
            if (file_exists("uploads/" . $photos["name"])) {
                $err =  $photos["name"] . ' existe déjà.</br> <a href="javascript:history.back()">Pour recommencer</a>';
            } else {
              if(! move_uploaded_file($photos["tmp_name"], "uploads/" . $photos["name"])){
                $err = "Erreur lors de l'upload du fichier";
              }else{
                $res['message'] = '<style="font-size:22px; margin-left:20%; margin-top:90px;text-align: center;">Votre fichier a été téléchargé avec succès.>';
                
                //préparation de la requête et des variables
                $sql = 'INSERT INTO galerie_images (pseudo, id_img, nom_img, nom_min) VALUES (:pseudo, :id_img, :nom_img, :nom_min)';
                $datas = array(
                    ':pseudo' => $pseudo,
                    ':id_img' => $id,
                    ':nom_img' => $filename,
                    ':nom_min' => $filename
                );
                //exécution de la requêete préparée
                try{
                  $req = $bdd->prepare($sql);
                  $req->execute($datas);
                }catch(Exception $e){
                  $err = " Erreur dans la requête : " . $e->getMessage();
                }
              }
            }
        } else {
          $err = 'Error: Il y a eu un problème de téléchargement de votre fichier. Veuillez réessayer.</br> <a href="javascript:history.back()">Pour recommencer</a>';
        }
      } else  {
        $err =  "Error: " . $photos["error"];
      }
    }
  } else {
    $err = "Méthode invalide"; 
  }
  
  $res['error'] = $err;
  
  // On renvoi la réponse au format JSON
  echo json_encode($res);
  
?>
Messages postés
33122
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
22 juillet 2021
3 633
mais non....
arrête d'enlever remettre tes anciens codes .. sinon on ne va pas s'en sortir !!!
SUrtout que dans ton fichier cible .. TU NE DOIS PAS AVOIR DE HTML !!!!
TU fais vraiment n'importe quoi !!
83 messages pour en arriver là ... franchement... il n'y a qu'avec toi que j'ai des discussions aussi longues !

DONC :

Tu dis ( avec le code que je viens de te donner )

mais de nouveau une erreur

QUELLE ERREUR ??

AS TU LES ALERTES ??? QU'EST-CE QU'ELLES CONTIENNENT ?
QUE T'AFFICHE LA CONSOLE ???
- Au moment où tu affiches la pages
- Après avoir lancé un UPLOAD
Messages postés
3009
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
23 juillet 2021
139
jordane merci pour ton aide
ce matin j ai tester ton nouveau fichier cible-fichier

alors voici après l envois du fichier
et j ai reçu cette erreur dans la réponse
{"error":"Error: 0"}

et voici donc la requete



et avant l envoi du fichier

il y a juste la page de mon site qui apparaît
et rien dans requête




pour ne pas rester les bras croises je voulais faire un test avec les anciens fichiers ...
Messages postés
33122
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
22 juillet 2021
3 633
On reprend...

Je ne te demande pas de déplier la ligne >post

Je te demande d'ouvrir la CONSOLE de ton navigateur
Ouvrir la page
Regarder dans la console TOUT ce qui y est écrit
Chercher l'endroit ou on peut lire : "ID" xxxx et "PSEUDO" xxxx qui est généré par la ligne de code
console.log('ID',id,'PSEUDO',pseudo); // pour voir si les variables se remplissent bien dans la console;..


Les "xxxx" étant le contenu des variables ou, si non trouvées, "undefined" ou "null" ...

Bref...
Ouvre la CONSOLE
Affiche la page
Ne touche à rien
Fais une capture
Montre nous
Messages postés
3009
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
23 juillet 2021
139
ok jordane
voici la capture d écran de la console sans toucher a quoi que ce soit ...

j ai regarder pour trouver ceci dans la console mais il n y a rien
Regarder dans la console TOUT ce qui y est écrit
Chercher l'endroit ou on peut lire : "ID" xxxx et "PSEUDO" xxxx qui est généré par la ligne de code

Messages postés
33122
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
22 juillet 2021
3 633
Peux-tu regarder le code source généré de la page ?
Je pense sincèrement que le cache de ton navigateur n'est pas vidé...
As-tu les alertes qui s'affichent ??
Je suppose que non....
Donc, vider complètement le cache de ton navigateur.
Messages postés
3009
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
23 juillet 2021
139
pour les essais je suis sous firefox et donc je vide le navigateur de cette façon et cela a chaque esai



voici le code source de la page

<!doctype html>
<html lang="en">
  <head>
      <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <!-- Bootstrap CSS -->
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
      <link rel="stylesheet" type="text/css" href="./css/album.css">
      <title> formulaire envoi de fichiers</title>
       	<style>
       @media (min-width: 0px) and (max-width:600px) {
          .container1{
            width: 85%;   
          }
       }
        @media (min-width: 601px) and (max-width:2500px) {
          .container1{
              width: 50%;    
          }
       }
	 </style>
  </head>   <!-- fin head -->
 
   <body >   <!-- debut body -->
      <!-- debut container total-->
      <div class="container">
     
       <!-- debut container entete-->
       <div class="container" style=" max-width: 100%;margin:auto;">
          <!-- debut banniere -->
          	<div class="parent"><img src="./image/top_image_perle-peche.jpg" alt="Nature" class="responsive">
			<div class="child1"></div>
			<div class="child1 child2">
				<div class="reseau-sociaux">
					<div class="reseau-sociaux-youtube">
						<a href="https://www.youtube.com/playlist?list=PLGsAPXsvnTPUVWSZUiQ_GwZz_-_z2i3f1" target="_blank"><img src="./image/youtube-peche-perle.png" alt="Nature" class="responsive"></a>
					</div>
					<div class="reseau-sociaux-blogger">
						<a href="http://philleperleur.blogspot.com/" target="_blank"><img src="./image/blogger-peche-perle.png" alt="Nature" class="responsive"></a>
					</div>
				</div>
			</div>
		</div>          <!-- fin banniere -->
          <!-- debut menu -->
          
		
		
	
		
		
		
		                     	<nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="width:100%;margin:auto;margin-top: 0.5%:margin-bottom:0.5%">
			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample06" aria-controls="navbarsExample06" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
			<div class="collapse navbar-collapse" id="navbarsExample06">
				<ul class="navbar-nav mr-auto">
					<li class="nav-item active"> <a class="nav-link" href="../accueil-peche-perle.php">Acceuil <span class="sr-only">(current)</span></a> </li>
					<li class="nav-item"> <a class="nav-link" href="../mon-histoire.php" >Mon histoire</a> </li>
					<li class="nav-item"> <a class="nav-link" href="../ma-technique.php" >Ma technique</a> </li>
					<li class="nav-item"> <a class="nav-link" href="../boutique.php">Boutique</a> </li>
					<li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Reseaux sociaux
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="http://philleperleur.blogspot.com/">Blogger</a>
          <a class="dropdown-item" href="https://www.youtube.com/playlist?list=PLGsAPXsvnTPUVWSZUiQ_GwZz_-_z2i3f1">Youtube</a>
                </li>
						<li class="nav-item"> <a class="nav-link" href="../contact.php" >Contact</a> </li>
				
				</ul>
			</div>
			<ul class="navbar-nav lg-auto"> 
	
				<a class="bg-primary text-white" style="margin-right:10px;margin-top:10px;" href="../deconnexion.php">Deconnexion</a> 
			
			</ul>
		</nav>
        
`
   
   
             <!-- fin menu -->
       </div>
       <!-- fin container entete-->
       
      <div class="container1" style=" max-width: 100%;margin:auto;">
           <form action="cible-fichier.php?pseudo=phil1&id=83"id="upload_form" enctype="multipart/form-data" method="post">
              <div class="form-group">
                <label for="fileUpload">Fichier:</label>
                <input type="file" name="photo" id="photo">
                <input type="submit" name="photo" value="Upload"  onchange="uploadFile()">
                <progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
                <h3 id="status"></h3>
                <p id="loaded_n_total"></p>
                <p><strong>Note:</strong> Veuillez patienter 1 a 2 minutes pour l upload svp</p>
                <p><strong>Note:</strong> Seuls les formats .jpg, .jpeg, .jpeg, .gif, .png sont autorisés jusqu'à une taille maximale de 5 Mo.</p>
              </div>
          </form>
      </div>
      <div class="container" style=" max-width: 100%;margin:auto;">
          <!-- debut pied de page-->
          <!-- debut pied de page-->
  <footer class="pt-4 my-md-5 pt-md-5 border-top" >
    <div class="row">
      <div class="col-12 col-md">
        <img class="mb-2" src="../assets/brand/bootstrap-solid.svg" alt="" width="24" height="24">
        <small class="d-block mb-3 text-muted">© 2017-2020</small>
      </div>
      <div class="col-6 col-md">
        <h5>Boutique</h5>
        <ul class="list-unstyled text-small">
          <li><a class="text-muted" href="../condition-generale-vente.php">Conditions générales</a></li>
          <li><a class="text-muted" href="../frais-de-livraison.php">Frais livraison</a></li>
          <li><a class="text-muted" href="../moyen-paiement.php">Moyen paiement</a></li>
          <li><a class="text-muted" href="https://www.mondialrelay.be/fr-be/trouver-le-point-relais-le-plus-proche-de-chez-moi/">Trouver son point Mondial relay</a></li>
          <li><a class="text-muted" href="https://www.mondialrelay.be/fr-be/suivi-de-colis/">Suivre son colis mondial relay</a></li>
         
        </ul>
      </div>
      <div class="col-6 col-md">
        <h5>Conditions diverses</h5>
        <ul class="list-unstyled text-small">
          <li><a class="text-muted" href="../conditions-general-peche-perle.php">Conditions générales</a></li>
          <li><a class="text-muted" href="../conditions-general-peche-perle.php">Propriétés intellectuelles</a></li>
          <li><a class="text-muted" href="./conditions-general-peche-perle.php">Cookies</a></li>
          <li><a class="text-muted" href="./conditions-general-peche-perle.php">Rgpd</a></li>
        </ul>
      </div>
      <div class="col-6 col-md">
        <h5>Contact</h5>
        <ul class="list-unstyled text-small">
          <li><a class="text-muted" href="../contact.php">Mail</a></li>
          <li><a class="text-muted" href="../contact.php">Formulaire</a></li>
          <li><a class="text-muted" href="https://www.youtube.com/playlist?list=PLGsAPXsvnTPUVWSZUiQ_GwZz_-_z2i3f1">Youtube</a></li>
          <li><a class="text-muted" href="http://philleperleur.blogspot.com/">Blogger</a></li>
        </ul>
      </div>
    </div>
  </footer>             <!-- Optional JavaScript; choose one of the two! -->
      <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
      <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
      <!-- Option 2: Separate Popper and Bootstrap JS -->
      <!--
         <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
         <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
         <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
         -->      </div>
    </div>
    
     <script>
     //--------------------------------------------------------//     
     // ON PLACE LE JAVASCRIPT  JUSTE AVANT  le <div style="text-align: right;position: fixed;z-index:9999999;bottom: 0;width: auto;right: 1%;cursor: pointer;line-height: 0;display:block !important;"><a title="Hosted on free web hosting 000webhost.com. Host your own website for FREE." target="_blank" href="https://www.000webhost.com/?utm_source=000webhostapp&utm_campaign=000_logo&utm_medium=website&utm_content=footer_img"><img src="https://cdn.000webhost.com/000webhost/logo/footer-powered-by-000webhost-white2.png" alt="www.000webhost.com"></a></div><script>function getCookie(t){for(var e=t+"=",n=decodeURIComponent(document.cookie).split(";"),o=0;o<n.length;o++){for(var i=n[o];" "==i.charAt(0);)i=i.substring(1);if(0==i.indexOf(e))return i.substring(e.length,i.length)}return""}getCookie("hostinger")&&(document.cookie="hostinger=;expires=Thu, 01 Jan 1970 00:00:01 GMT;",location.reload());var wordpressAdminBody=document.getElementsByClassName("wp-admin")[0],notification=document.getElementsByClassName("notice notice-success is-dismissible"),hostingerLogo=document.getElementsByClassName("hlogo"),mainContent=document.getElementsByClassName("notice_content")[0];if(null!=wordpressAdminBody&¬ification.length>0&&null!=mainContent){var googleFont=document.createElement("link");googleFontHref=document.createAttribute("href"),googleFontRel=document.createAttribute("rel"),googleFontHref.value="https://fonts.googleapis.com/css?family=Roboto:300,400,600,700",googleFontRel.value="stylesheet",googleFont.setAttributeNode(googleFontHref),googleFont.setAttributeNode(googleFontRel);var css="@media only screen and (max-width: 576px) {#main_content {max-width: 320px !important;} #main_content h1 {font-size: 30px !important;} #main_content h2 {font-size: 40px !important; margin: 20px 0 !important;} #main_content p {font-size: 14px !important;} #main_content .content-wrapper {text-align: center !important;}} @media only screen and (max-width: 781px) {#main_content {margin: auto; justify-content: center; max-width: 445px;}} @media only screen and (max-width: 1325px) {.web-hosting-90-off-image-wrapper {position: absolute; max-width: 95% !important;} .notice_content {justify-content: center;} .web-hosting-90-off-image {opacity: 0.3;}} @media only screen and (min-width: 769px) {.notice_content {justify-content: space-between;} #main_content {margin-left: 5%; max-width: 445px;} .web-hosting-90-off-image-wrapper {position: absolute; display: flex; justify-content: center; width: 100%; }} .web-hosting-90-off-image {max-width: 90%;} .content-wrapper {min-height: 454px; display: flex; flex-direction: column; justify-content: center; z-index: 5} .notice_content {display: flex; align-items: center;} * {-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;} .upgrade_button_red_sale{box-shadow: 0 2px 4px 0 rgba(255, 69, 70, 0.2); max-width: 350px; border: 0; border-radius: 3px; background-color: #ff4546 !important; padding: 15px 55px !important; font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 600; color: #ffffff;} .upgrade_button_red_sale:hover{color: #ffffff !important; background: #d10303 !important;}",style=document.createElement("style"),sheet=window.document.styleSheets[0];style.styleSheet?style.styleSheet.cssText=css:style.appendChild(document.createTextNode(css)),document.getElementsByTagName("head")[0].appendChild(style),document.getElementsByTagName("head")[0].appendChild(googleFont);var button=document.getElementsByClassName("upgrade_button_red")[0],link=button.parentElement;link.setAttribute("href","https://www.hostinger.com/hosting-starter-offer?utm_source=000webhost&utm_medium=panel&utm_campaign=000-wp"),link.innerHTML='<button class="upgrade_button_red_sale">Go for it</button>',(notification=notification[0]).setAttribute("style","padding-bottom: 0; padding-top: 5px; background-color: #040713; background-size: cover; background-repeat: no-repeat; color: #ffffff; border-left-color: #040713;"),notification.className="notice notice-error is-dismissible";var mainContentHolder=document.getElementById("main_content");mainContentHolder.setAttribute("style","padding: 0;"),hostingerLogo[0].remove();var h1Tag=notification.getElementsByTagName("H1")[0];h1Tag.className="000-h1",h1Tag.innerHTML="Black Friday Prices",h1Tag.setAttribute("style",'color: white; font-family: "Roboto", sans-serif; font-size: 22px; font-weight: 700; text-transform: uppercase;');var h2Tag=document.createElement("H2");h2Tag.innerHTML="Get 90% Off!",h2Tag.setAttribute("style",'color: white; margin: 10px 0 15px 0; font-family: "Roboto", sans-serif; font-size: 60px; font-weight: 700; line-height: 1;'),h1Tag.parentNode.insertBefore(h2Tag,h1Tag.nextSibling);var paragraph=notification.getElementsByTagName("p")[0];paragraph.innerHTML="Get Web Hosting for $0.99/month + SSL Certificate for FREE!",paragraph.setAttribute("style",'font-family: "Roboto", sans-serif; font-size: 16px; font-weight: 700; margin-bottom: 15px;');var list=notification.getElementsByTagName("UL")[0];list.remove();var org_html=mainContent.innerHTML,new_html='<div class="content-wrapper">'+mainContent.innerHTML+'</div><div class="web-hosting-90-off-image-wrapper"><img class="web-hosting-90-off-image" src="https://cdn.000webhost.com/000webhost/promotions/bf-2020-wp-inject-img.png"></div>';mainContent.innerHTML=new_html;var saleImage=mainContent.getElementsByClassName("web-hosting-90-off-image")[0]}</script></body>
     //--------------------------------------------------------//
     
      var pseudo = 'phil1';
      var id= '83';
      console.log('ID',id,'PSEUDO',pseudo); // pour voir si les variables se remplissent bien dans la console;..

      function _(el) {
        return document.getElementById(el);
      }
        

      function uploadFile(){
        var file = _("photo").files[0];
        var formdata = new FormData();
        formdata.append("photo", file);
        formdata.append("pseudo ", pseudo );
        formdata.append("id", id);
        
        //le temps des tests : 
        alert('pseudo:' + pseudo + '  id: ' + id);
        console.log('ID',id,'PSEUDO',pseudo); // pour voir si les variables se remplissent bien dans la console;..
        
        var ajax = new XMLHttpRequest();
        ajax.upload.addEventListener("progress", progressHandler, false);
        ajax.addEventListener("load", completeHandler, false);
        ajax.addEventListener("error", errorHandler, false);
        ajax.addEventListener("abort", abortHandler, false);
        ajax.open("POST", "cible-fichier.php"); // http://www.developphp.com/video/JavaScript/File-Upload-Progress-Bar-Meter-Tutorial-Ajax-PHP
        //use file_upload_parser.php from above url
        ajax.send(formdata);
      }

      function progressHandler(event) {
        _("loaded_n_total").innerHTML = "Uploaded " + event.loaded + " bytes of " + event.total;
        var percent = (event.loaded / event.total) * 100;
        _("progressBar").value = Math.round(percent);
        _("status").innerHTML = Math.round(percent) + "% uploaded... please wait";
      }

      function completeHandler(event) {
        let res = typeof(event.target.responseText)!='undefined' ? JSON.parse(event.target.responseText) : "";
        let message = typeof(res.message)!='undefined' ? res.message : "";
        let error = typeof(res.error)!='undefined' ? res.error : null;
        
        _("status").innerHTML = error ? error : message;
        _("progressBar").value = 0; //wil clear progress bar after successful upload
      }
      function errorHandler(event) {
        _("status").innerHTML = "Upload Failed";
      }
      function abortHandler(event) {
        _("status").innerHTML = "Upload Aborted";
      }
    </script>
   </body>
   <!-- fin du body-->
</html>
.
Messages postés
3009
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
23 juillet 2021
139
ah mince je pensais que mon message était parti ....
bon je recommence alors

je fais mes tests sur firefox , donc pas de soucis pour vider complètement le navigateur
je pratique de cette manière


pour ce qui est du cache le voici
<!doctype html>
<html lang="en">
  <head>
      <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <!-- Bootstrap CSS -->
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
      <link rel="stylesheet" type="text/css" href="./css/album.css">
      <title> formulaire envoi de fichiers</title>
       	<style>
       @media (min-width: 0px) and (max-width:600px) {
          .container1{
            width: 85%;   
          }
       }
        @media (min-width: 601px) and (max-width:2500px) {
          .container1{
              width: 50%;    
          }
       }
	 </style>
  </head>   <!-- fin head -->
 
   <body >   <!-- debut body -->
      <!-- debut container total-->
      <div class="container">
     
       <!-- debut container entete-->
       <div class="container" style=" max-width: 100%;margin:auto;">
          <!-- debut banniere -->
          	<div class="parent"><img src="./image/top_image_perle-peche.jpg" alt="Nature" class="responsive">
			<div class="child1"></div>
			<div class="child1 child2">
				<div class="reseau-sociaux">
					<div class="reseau-sociaux-youtube">
						<a href="https://www.youtube.com/playlist?list=PLGsAPXsvnTPUVWSZUiQ_GwZz_-_z2i3f1" target="_blank"><img src="./image/youtube-peche-perle.png" alt="Nature" class="responsive"></a>
					</div>
					<div class="reseau-sociaux-blogger">
						<a href="http://philleperleur.blogspot.com/" target="_blank"><img src="./image/blogger-peche-perle.png" alt="Nature" class="responsive"></a>
					</div>
				</div>
			</div>
		</div>          <!-- fin banniere -->
          <!-- debut menu -->
          
		
		
	
		
		
		
		                     	<nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="width:100%;margin:auto;margin-top: 0.5%:margin-bottom:0.5%">
			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample06" aria-controls="navbarsExample06" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
			<div class="collapse navbar-collapse" id="navbarsExample06">
				<ul class="navbar-nav mr-auto">
					<li class="nav-item active"> <a class="nav-link" href="../accueil-peche-perle.php">Acceuil <span class="sr-only">(current)</span></a> </li>
					<li class="nav-item"> <a class="nav-link" href="../mon-histoire.php" >Mon histoire</a> </li>
					<li class="nav-item"> <a class="nav-link" href="../ma-technique.php" >Ma technique</a> </li>
					<li class="nav-item"> <a class="nav-link" href="../boutique.php">Boutique</a> </li>
					<li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Reseaux sociaux
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="http://philleperleur.blogspot.com/">Blogger</a>
          <a class="dropdown-item" href="https://www.youtube.com/playlist?list=PLGsAPXsvnTPUVWSZUiQ_GwZz_-_z2i3f1">Youtube</a>
                </li>
						<li class="nav-item"> <a class="nav-link" href="../contact.php" >Contact</a> </li>
				
				</ul>
			</div>
			<ul class="navbar-nav lg-auto"> 
	
				<a class="bg-primary text-white" style="margin-right:10px;margin-top:10px;" href="../deconnexion.php">Deconnexion</a> 
			
			</ul>
		</nav>
        
`
   
   
             <!-- fin menu -->
       </div>
       <!-- fin container entete-->
       
      <div class="container1" style=" max-width: 100%;margin:auto;">
           <form action="cible-fichier.php?pseudo=phil1&id=83"id="upload_form" enctype="multipart/form-data" method="post">
              <div class="form-group">
                <label for="fileUpload">Fichier:</label>
                <input type="file" name="photo" id="photo">
                <input type="submit" name="photo" value="Upload"  onchange="uploadFile()">
                <progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
                <h3 id="status"></h3>
                <p id="loaded_n_total"></p>
                <p><strong>Note:</strong> Veuillez patienter 1 a 2 minutes pour l upload svp</p>
                <p><strong>Note:</strong> Seuls les formats .jpg, .jpeg, .jpeg, .gif, .png sont autorisés jusqu'à une taille maximale de 5 Mo.</p>
              </div>
          </form>
      </div>
      <div class="container" style=" max-width: 100%;margin:auto;">
          <!-- debut pied de page-->
          <!-- debut pied de page-->
  <footer class="pt-4 my-md-5 pt-md-5 border-top" >
    <div class="row">
      <div class="col-12 col-md">
        <img class="mb-2" src="../assets/brand/bootstrap-solid.svg" alt="" width="24" height="24">
        <small class="d-block mb-3 text-muted">© 2017-2020</small>
      </div>
      <div class="col-6 col-md">
        <h5>Boutique</h5>
        <ul class="list-unstyled text-small">
          <li><a class="text-muted" href="../condition-generale-vente.php">Conditions générales</a></li>
          <li><a class="text-muted" href="../frais-de-livraison.php">Frais livraison</a></li>
          <li><a class="text-muted" href="../moyen-paiement.php">Moyen paiement</a></li>
          <li><a class="text-muted" href="https://www.mondialrelay.be/fr-be/trouver-le-point-relais-le-plus-proche-de-chez-moi/">Trouver son point Mondial relay</a></li>
          <li><a class="text-muted" href="https://www.mondialrelay.be/fr-be/suivi-de-colis/">Suivre son colis mondial relay</a></li>
         
        </ul>
      </div>
      <div class="col-6 col-md">
        <h5>Conditions diverses</h5>
        <ul class="list-unstyled text-small">
          <li><a class="text-muted" href="../conditions-general-peche-perle.php">Conditions générales</a></li>
          <li><a class="text-muted" href="../conditions-general-peche-perle.php">Propriétés intellectuelles</a></li>
          <li><a class="text-muted" href="./conditions-general-peche-perle.php">Cookies</a></li>
          <li><a class="text-muted" href="./conditions-general-peche-perle.php">Rgpd</a></li>
        </ul>
      </div>
      <div class="col-6 col-md">
        <h5>Contact</h5>
        <ul class="list-unstyled text-small">
          <li><a class="text-muted" href="../contact.php">Mail</a></li>
          <li><a class="text-muted" href="../contact.php">Formulaire</a></li>
          <li><a class="text-muted" href="https://www.youtube.com/playlist?list=PLGsAPXsvnTPUVWSZUiQ_GwZz_-_z2i3f1">Youtube</a></li>
          <li><a class="text-muted" href="http://philleperleur.blogspot.com/">Blogger</a></li>
        </ul>
      </div>
    </div>
  </footer>             <!-- Optional JavaScript; choose one of the two! -->
      <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
      <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
      <!-- Option 2: Separate Popper and Bootstrap JS -->
      <!--
         <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
         <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
         <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
         -->      </div>
    </div>
    
     <script>
     //--------------------------------------------------------//     
     // ON PLACE LE JAVASCRIPT  JUSTE AVANT  le <div style="text-align: right;position: fixed;z-index:9999999;bottom: 0;width: auto;right: 1%;cursor: pointer;line-height: 0;display:block !important;"><a title="Hosted on free web hosting 000webhost.com. Host your own website for FREE." target="_blank" href="https://www.000webhost.com/?utm_source=000webhostapp&utm_campaign=000_logo&utm_medium=website&utm_content=footer_img"><img src="https://cdn.000webhost.com/000webhost/logo/footer-powered-by-000webhost-white2.png" alt="www.000webhost.com"></a></div><script>function getCookie(t){for(var e=t+"=",n=decodeURIComponent(document.cookie).split(";"),o=0;o<n.length;o++){for(var i=n[o];" "==i.charAt(0);)i=i.substring(1);if(0==i.indexOf(e))return i.substring(e.length,i.length)}return""}getCookie("hostinger")&&(document.cookie="hostinger=;expires=Thu, 01 Jan 1970 00:00:01 GMT;",location.reload());var wordpressAdminBody=document.getElementsByClassName("wp-admin")[0],notification=document.getElementsByClassName("notice notice-success is-dismissible"),hostingerLogo=document.getElementsByClassName("hlogo"),mainContent=document.getElementsByClassName("notice_content")[0];if(null!=wordpressAdminBody&¬ification.length>0&&null!=mainContent){var googleFont=document.createElement("link");googleFontHref=document.createAttribute("href"),googleFontRel=document.createAttribute("rel"),googleFontHref.value="https://fonts.googleapis.com/css?family=Roboto:300,400,600,700",googleFontRel.value="stylesheet",googleFont.setAttributeNode(googleFontHref),googleFont.setAttributeNode(googleFontRel);var css="@media only screen and (max-width: 576px) {#main_content {max-width: 320px !important;} #main_content h1 {font-size: 30px !important;} #main_content h2 {font-size: 40px !important; margin: 20px 0 !important;} #main_content p {font-size: 14px !important;} #main_content .content-wrapper {text-align: center !important;}} @media only screen and (max-width: 781px) {#main_content {margin: auto; justify-content: center; max-width: 445px;}} @media only screen and (max-width: 1325px) {.web-hosting-90-off-image-wrapper {position: absolute; max-width: 95% !important;} .notice_content {justify-content: center;} .web-hosting-90-off-image {opacity: 0.3;}} @media only screen and (min-width: 769px) {.notice_content {justify-content: space-between;} #main_content {margin-left: 5%; max-width: 445px;} .web-hosting-90-off-image-wrapper {position: absolute; display: flex; justify-content: center; width: 100%; }} .web-hosting-90-off-image {max-width: 90%;} .content-wrapper {min-height: 454px; display: flex; flex-direction: column; justify-content: center; z-index: 5} .notice_content {display: flex; align-items: center;} * {-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;} .upgrade_button_red_sale{box-shadow: 0 2px 4px 0 rgba(255, 69, 70, 0.2); max-width: 350px; border: 0; border-radius: 3px; background-color: #ff4546 !important; padding: 15px 55px !important; font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 600; color: #ffffff;} .upgrade_button_red_sale:hover{color: #ffffff !important; background: #d10303 !important;}",style=document.createElement("style"),sheet=window.document.styleSheets[0];style.styleSheet?style.styleSheet.cssText=css:style.appendChild(document.createTextNode(css)),document.getElementsByTagName("head")[0].appendChild(style),document.getElementsByTagName("head")[0].appendChild(googleFont);var button=document.getElementsByClassName("upgrade_button_red")[0],link=button.parentElement;link.setAttribute("href","https://www.hostinger.com/hosting-starter-offer?utm_source=000webhost&utm_medium=panel&utm_campaign=000-wp"),link.innerHTML='<button class="upgrade_button_red_sale">Go for it</button>',(notification=notification[0]).setAttribute("style","padding-bottom: 0; padding-top: 5px; background-color: #040713; background-size: cover; background-repeat: no-repeat; color: #ffffff; border-left-color: #040713;"),notification.className="notice notice-error is-dismissible";var mainContentHolder=document.getElementById("main_content");mainContentHolder.setAttribute("style","padding: 0;"),hostingerLogo[0].remove();var h1Tag=notification.getElementsByTagName("H1")[0];h1Tag.className="000-h1",h1Tag.innerHTML="Black Friday Prices",h1Tag.setAttribute("style",'color: white; font-family: "Roboto", sans-serif; font-size: 22px; font-weight: 700; text-transform: uppercase;');var h2Tag=document.createElement("H2");h2Tag.innerHTML="Get 90% Off!",h2Tag.setAttribute("style",'color: white; margin: 10px 0 15px 0; font-family: "Roboto", sans-serif; font-size: 60px; font-weight: 700; line-height: 1;'),h1Tag.parentNode.insertBefore(h2Tag,h1Tag.nextSibling);var paragraph=notification.getElementsByTagName("p")[0];paragraph.innerHTML="Get Web Hosting for $0.99/month + SSL Certificate for FREE!",paragraph.setAttribute("style",'font-family: "Roboto", sans-serif; font-size: 16px; font-weight: 700; margin-bottom: 15px;');var list=notification.getElementsByTagName("UL")[0];list.remove();var org_html=mainContent.innerHTML,new_html='<div class="content-wrapper">'+mainContent.innerHTML+'</div><div class="web-hosting-90-off-image-wrapper"><img class="web-hosting-90-off-image" src="https://cdn.000webhost.com/000webhost/promotions/bf-2020-wp-inject-img.png"></div>';mainContent.innerHTML=new_html;var saleImage=mainContent.getElementsByClassName("web-hosting-90-off-image")[0]}</script></body>
     //--------------------------------------------------------//
     
      var pseudo = 'phil1';
      var id= '83';
      console.log('ID',id,'PSEUDO',pseudo); // pour voir si les variables se remplissent bien dans la console;..

      function _(el) {
        return document.getElementById(el);
      }
        

      function uploadFile(){
        var file = _("photo").files[0];
        var formdata = new FormData();
        formdata.append("photo", file);
        formdata.append("pseudo ", pseudo );
        formdata.append("id", id);
        
        //le temps des tests : 
        alert('pseudo:' + pseudo + '  id: ' + id);
        console.log('ID',id,'PSEUDO',pseudo); // pour voir si les variables se remplissent bien dans la console;..
        
        var ajax = new XMLHttpRequest();
        ajax.upload.addEventListener("progress", progressHandler, false);
        ajax.addEventListener("load", completeHandler, false);
        ajax.addEventListener("error", errorHandler, false);
        ajax.addEventListener("abort", abortHandler, false);
        ajax.open("POST", "cible-fichier.php"); // http://www.developphp.com/video/JavaScript/File-Upload-Progress-Bar-Meter-Tutorial-Ajax-PHP
        //use file_upload_parser.php from above url
        ajax.send(formdata);
      }

      function progressHandler(event) {
        _("loaded_n_total").innerHTML = "Uploaded " + event.loaded + " bytes of " + event.total;
        var percent = (event.loaded / event.total) * 100;
        _("progressBar").value = Math.round(percent);
        _("status").innerHTML = Math.round(percent) + "% uploaded... please wait";
      }

      function completeHandler(event) {
        let res = typeof(event.target.responseText)!='undefined' ? JSON.parse(event.target.responseText) : "";
        let message = typeof(res.message)!='undefined' ? res.message : "";
        let error = typeof(res.error)!='undefined' ? res.error : null;
        
        _("status").innerHTML = error ? error : message;
        _("progressBar").value = 0; //wil clear progress bar after successful upload
      }
      function errorHandler(event) {
        _("status").innerHTML = "Upload Failed";
      }
      function abortHandler(event) {
        _("status").innerHTML = "Upload Aborted";
      }
    </script>
   </body>
   <!-- fin du body-->
</html>
.
Messages postés
33122
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
22 juillet 2021
3 633
Dans le code généré, on voit bien que les variables ont les bonnes valeurs
  
      var pseudo = 'phil1';
      var id= '83';


Donc, lorsque tu upload un fichier, tu devrais avoir les données qui sont envoyées ainsi qu'un popup d'alerte les affichant... ( à moins que tu n'aies coché la case dans ton navigateur indiquant ne plus vouloir les voir... )
Messages postés
3009
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
23 juillet 2021
139
non aucun message d alerte

comme je te l ai déjà expliqué cela est un reflexe
je vide mon navigateur avant chaque test
Messages postés
3009
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
23 juillet 2021
139
non jordane
hélas non et je n ai cocher dans mon navigateur , je laisse toujours les options par défaut
voici ce que j ai après l upload
aucune image dans le dossier uploads et rien non plus dans la base de donnée

on voit également que dans le fichier cible il y a l id et le pseudo
Messages postés
33122
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
22 juillet 2021
3 633
Je pense avoir compris l'erreur ...

<?php
// Démarrage SESSION
session_start();

//Connexion à la bdd
require_once 'base.php';

// Variables/constantes...
  $allowed = array(
            "jpg" => "image/jpg",
            "JPG" => "image/JPG",
            "jpeg" => "image/jpeg",
            "JPEG" => "image/JPEG",
            "gif" => "image/gif",
            "png" => "image/png",
            "PNG" => "image/PNG"
        );

$res = array();// variable qui contiendra les infos à retourner au script JS
        
// récupération PROPRE des variables de type "array" AVANT de les utiliser  (j'ai l'impression de radoter vu le nombre de fois que je t'ai déjà donné ce genre de code !!!! )
$getpseudo = !empty($_COOKIE['pseudo']) ? $_COOKIE['pseudo'] : NULL;
$pseudo = !empty($_POST['pseudo']) ? $_POST['pseudo']: $getpseudo;
$id = !empty($_POST['id']) ? $_POST['id']: NULL;
$photos = !empty($_FILES["photo"]) ? $_FILES["photo"] : NULL;    


// Vérifier si le formulaire a été soumis
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // Vérifie si le fichier a été uploadé sans erreur.
   
    if ($photos ){
      if( $photos["error"] != 0 ){
        $err = 'Erreur : ' . $photo['error']; 
      }else{
        $filename = $photos["name"];
        $filetype = $photos["type"];
        $filesize = $photos["size"];
        // Vérifie l'extension du fichier
        $ext = pathinfo($filename, PATHINFO_EXTENSION);
        if (!array_key_exists($ext, $allowed)) {
          $err = 'Erreur : Veuillez sélectionner un format de fichier valide.</br> <a href="javascript:history.back()">Pour recommencer</a>';
        }
        // Vérifie la taille du fichier - 5Mo maximum
        $maxsize = 5 * 1024 * 1024;
        if ($filesize > $maxsize){
            $err = 'Error: La taille du fichier est supérieure à la limite autorisée.</br> <a href="javascript:history.back()">Pour recommencer</a>';
          
          // Vérifie le type MIME du fichier
          if (in_array($filetype, $allowed)) {
              // Vérifie si le fichier existe avant de le télécharger.
              if (file_exists("uploads/" . $photos["name"])) {
                  $err =  $photos["name"] . ' existe déjà.</br> <a href="javascript:history.back()">Pour recommencer</a>';
              } else {
                if(! move_uploaded_file($photos["tmp_name"], "uploads/" . $photos["name"])){
                  $err = "Erreur lors de l'upload du fichier";
                }else{
                  $res['message'] = '<style="font-size:22px; margin-left:20%; margin-top:90px;text-align: center;">Votre fichier a été téléchargé avec succès.>';
                  
                  //préparation de la requête et des variables
                  $sql = 'INSERT INTO galerie_images (pseudo, id_img, nom_img, nom_min) VALUES (:pseudo, :id_img, :nom_img, :nom_min)';
                  $datas = array(
                      ':pseudo' => $pseudo,
                      ':id_img' => $id,
                      ':nom_img' => $filename,
                      ':nom_min' => $filename
                  );
                  //exécution de la requêete préparée
                  try{
                    $req = $bdd->prepare($sql);
                    $req->execute($datas);
                  }catch(Exception $e){
                    $err = " Erreur dans la requête : " . $e->getMessage();
                  }
                }
              }
          } else {
            $err = 'Error: Il y a eu un problème de téléchargement de votre fichier. Veuillez réessayer.</br> <a href="javascript:history.back()">Pour recommencer</a>';
          }
        }
      } else  {
        $debug = ['POST'=>$_POST,'FILE'=>$_FILES];
        $err =  "Error: " . $photos["error"] . "   ---  " . print_r($debug,true);
      }
    }
  } else {
    $err = "Méthode invalide"; 
  }
  
  $res['error'] = $err;
  
  // On renvoi la réponse au format JSON
  echo json_encode($res);
  

Messages postés
3009
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
23 juillet 2021
139
merci jordane pour la correction
mais il y a un soucis avec une accolade ...
j ai essaye de regarder ce qui pouvait clocher mais toutes les accolades sont bonnes

Messages postés
33122
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
22 juillet 2021
3 633
<?php
// Démarrage SESSION
session_start();

//Connexion à la bdd
require_once 'base.php';

// Variables/constantes...
  $allowed = array(
            "jpg" => "image/jpg",
            "JPG" => "image/JPG",
            "jpeg" => "image/jpeg",
            "JPEG" => "image/JPEG",
            "gif" => "image/gif",
            "png" => "image/png",
            "PNG" => "image/PNG"
        );

$res = array();// variable qui contiendra les infos à retourner au script JS
        
// récupération PROPRE des variables de type "array" AVANT de les utiliser  (j'ai l'impression de radoter vu le nombre de fois que je t'ai déjà donné ce genre de code !!!! )
$getpseudo = !empty($_COOKIE['pseudo']) ? $_COOKIE['pseudo'] : NULL;
$pseudo = !empty($_POST['pseudo']) ? $_POST['pseudo']: $getpseudo;
$id = !empty($_POST['id']) ? $_POST['id']: NULL;
$photos = !empty($_FILES["photo"]) ? $_FILES["photo"] : NULL;    


// Vérifier si le formulaire a été soumis
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // Vérifie si le fichier a été uploadé sans erreur.
   
    if ($photos ){
      if( $photos["error"] != 0 ){
        $err = 'Erreur : ' . $photo['error']; 
      }else{
        $filename = $photos["name"];
        $filetype = $photos["type"];
        $filesize = $photos["size"];
        // Vérifie l'extension du fichier
        $ext = pathinfo($filename, PATHINFO_EXTENSION);
        if (!array_key_exists($ext, $allowed)) {
          $err = 'Erreur : Veuillez sélectionner un format de fichier valide.</br> <a href="javascript:history.back()">Pour recommencer</a>';
        }
        // Vérifie la taille du fichier - 5Mo maximum
        $maxsize = 5 * 1024 * 1024;
        if ($filesize > $maxsize){
            $err = 'Error: La taille du fichier est supérieure à la limite autorisée.</br> <a href="javascript:history.back()">Pour recommencer</a>';
          
          // Vérifie le type MIME du fichier
          if (in_array($filetype, $allowed)) {
              // Vérifie si le fichier existe avant de le télécharger.
              if (file_exists("uploads/" . $photos["name"])) {
                  $err =  $photos["name"] . ' existe déjà.</br> <a href="javascript:history.back()">Pour recommencer</a>';
              } else {
                if(! move_uploaded_file($photos["tmp_name"], "uploads/" . $photos["name"])){
                  $err = "Erreur lors de l'upload du fichier";
                }else{
                  $res['message'] = '<style="font-size:22px; margin-left:20%; margin-top:90px;text-align: center;">Votre fichier a été téléchargé avec succès.>';
                  
                  //préparation de la requête et des variables
                  $sql = 'INSERT INTO galerie_images (pseudo, id_img, nom_img, nom_min) VALUES (:pseudo, :id_img, :nom_img, :nom_min)';
                  $datas = array(
                      ':pseudo' => $pseudo,
                      ':id_img' => $id,
                      ':nom_img' => $filename,
                      ':nom_min' => $filename
                  );
                  //exécution de la requêete préparée
                  try{
                    $req = $bdd->prepare($sql);
                    $req->execute($datas);
                  }catch(Exception $e){
                    $err = " Erreur dans la requête : " . $e->getMessage();
                  }
                }
              }
          } else {
            $err = 'Error: Il y a eu un problème de téléchargement de votre fichier. Veuillez réessayer.</br> <a href="javascript:history.back()">Pour recommencer</a>';
          }
        }
      }
    } else  {
      $debug = ['POST'=>$_POST,'FILE'=>$_FILES];
      $err =  "Error: " . $photos["error"] . "   ---  " . print_r($debug,true);
    } 
  } else {
    $err = "Méthode invalide"; 
  }
  
  $res['error'] = $err;
  
  // On renvoi la réponse au format JSON
  echo json_encode($res);
 exit;
Messages postés
3009
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
23 juillet 2021
139
hélas non jordane
après l envois du fichier j ai une nouvelle erreur

Messages postés
33122
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
22 juillet 2021
3 633
Non il n'y a pas d'erreur..
A la limite, à la ligne 90
remplace par
if(!empty($err)){
    $res['error'] = $err;
}    
Messages postés
3009
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
23 juillet 2021
139
merci jordane
mais de nouveau après la réalisation de l upload et après avoir vider le cache j ai un message



par contre je viens de faire un essai et lorsque je suis sur la page form-fichier avec chrome et après avoir vider le cache ..
j ai la même chose avec internet explorer


on dirait que le code javascript n est pas pris en compte