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

Réponse 41 / 109

flexi2202 Messages postés 3784 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 30 mars 2024 179
30 mai 2021 à 18:10

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';

jordane45 Messages postés 38139 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 4 649
30 mai 2021 à 20:06

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);

Réponse 42 / 109

flexi2202 Messages postés 3784 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 30 mars 2024 179
30 mai 2021 à 20:32

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"}

jordane45 Messages postés 38139 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 4 649
30 mai 2021 à 20:38

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.

Réponse 43 / 109

flexi2202 Messages postés 3784 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 30 mars 2024 179
30 mai 2021 à 22:50

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

jordane45 Messages postés 38139 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 4 649
30 mai 2021 à 23:47

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 )

Réponse 44 / 109

flexi2202 Messages postés 3784 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 30 mars 2024 179
30 mai 2021 à 23:56

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>

jordane45 Messages postés 38139 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 4 649
30 mai 2021 à 23:59

Tu as bien, dans la barre d'adresse de ton navigateur, une variable id et une variable pseudo ?

Réponse 45 / 109

flexi2202 Messages postés 3784 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 30 mars 2024 179
Modifié le 31 mai 2021 à 00:01

oui j ai bien ceci

https://accessible-preparat.000webhostapp.com/nosignal/journee-peche/cible-fichier.php?pseudo=phil1&id=83

je le surveille depuis le début

jordane45 Messages postés 38139 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 4 649
31 mai 2021 à 00:13

Et donc tu as bien vider le cache de ton navigateur ?

Qu'y a-t-il d'autre d'affiche à la console ?

Réponse 46 / 109

flexi2202 Messages postés 3784 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 30 mars 2024 179
31 mai 2021 à 00:25

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

Réponse 47 / 109

flexi2202 Messages postés 3784 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 30 mars 2024 179
31 mai 2021 à 00:29

avec chrome et firefox c est pareil

jordane45 Messages postés 38139 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 4 649
31 mai 2021 à 00:44

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 ?

Réponse 48 / 109

flexi2202 Messages postés 3784 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 30 mars 2024 179
31 mai 2021 à 00:49

bne oui c est bien ce que je me disais

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

Réponse 49 / 109

jordane45 Messages postés 38139 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 4 649
31 mai 2021 à 01:37


<?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>

Réponse 50 / 109

flexi2202 Messages postés 3784 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 30 mars 2024 179
31 mai 2021 à 08:32

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);
  
?>

jordane45 Messages postés 38139 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 4 649
31 mai 2021 à 08:41

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

Réponse 51 / 109

flexi2202 Messages postés 3784 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 30 mars 2024 179
31 mai 2021 à 09:13

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 ...

jordane45 Messages postés 38139 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 4 649
31 mai 2021 à 10:03

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

Réponse 52 / 109

flexi2202 Messages postés 3784 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 30 mars 2024 179
31 mai 2021 à 10:17

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

jordane45 Messages postés 38139 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 4 649
31 mai 2021 à 13:03

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.

Réponse 53 / 109

flexi2202 Messages postés 3784 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 30 mars 2024 179
31 mai 2021 à 13:15

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>
.

Réponse 54 / 109

flexi2202 Messages postés 3784 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 30 mars 2024 179
31 mai 2021 à 15:46

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>
.

jordane45 Messages postés 38139 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 4 649
31 mai 2021 à 15:54

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... )

Réponse 55 / 109

flexi2202 Messages postés 3784 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 30 mars 2024 179
Modifié le 31 mai 2021 à 15:47

non aucun message d alerte

comme je te l ai déjà expliqué cela est un reflexe
je vide mon navigateur avant chaque test

Réponse 56 / 109

flexi2202 Messages postés 3784 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 30 mars 2024 179
Modifié le 31 mai 2021 à 16:04

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

Réponse 57 / 109

jordane45 Messages postés 38139 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 4 649
31 mai 2021 à 16:28

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);

Réponse 58 / 109

flexi2202 Messages postés 3784 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 30 mars 2024 179
31 mai 2021 à 16:49

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

jordane45 Messages postés 38139 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 4 649
Modifié le 31 mai 2021 à 16:52

<?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;

Réponse 59 / 109

flexi2202 Messages postés 3784 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 30 mars 2024 179
31 mai 2021 à 17:01

hélas non jordane
après l envois du fichier j ai une nouvelle erreur

jordane45 Messages postés 38139 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 4 649
31 mai 2021 à 17:19

Non il n'y a pas d'erreur..
A la limite, à la ligne 90
remplace par

if(!empty($err)){
    $res['error'] = $err;
}

Réponse 60 / 109

flexi2202 Messages postés 3784 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 30 mars 2024 179
31 mai 2021 à 17:32

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

Ajout d une barre de progression sur l upload des images

109 réponses

Discussions similaires

Newsletters