Ajout d une barre de progression sur l upload des images
Résolu
flexi2202
Messages postés
3822
Date d'inscription
Statut
Membre
Dernière intervention
-
flexi2202 Messages postés 3822 Date d'inscription Statut Membre Dernière intervention -
flexi2202 Messages postés 3822 Date d'inscription Statut Membre Dernière intervention -
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
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; } ?>
A voir également:
- Barre de progression word
- Word 2013 - Télécharger - Traitement de texte
- Tableau word - Guide
- Impossible de supprimer une page word - Guide
- Espace insécable word - Guide
- Word et excel gratuit - Guide
109 réponses
je viens d aller voir
et j ai un exemple
donc ce que tu me demandes c est d écrire autrement la ligne
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';
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';
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"}
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"}
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.
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.
oui oui jordane
j ai fait un copier coller
voici le fichier modifie
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


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


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
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>
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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
https://accessible-preparat.000webhostapp.com/nosignal/journee-peche/cible-fichier.php?pseudo=phil1&id=83
je le surveille depuis le début
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

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

<?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>
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
et voici celui que tu avais redigè
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); ?>
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 )
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
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
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 ...
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 ...
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
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
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
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

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

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

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> .
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
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> .
Dans le code généré, on voit bien que les variables ont les bonnes valeurs
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... )
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... )
non aucun message d alerte
comme je te l ai déjà expliqué cela est un reflexe
je vide mon navigateur avant chaque test
comme je te l ai déjà expliqué cela est un reflexe
je vide mon navigateur avant chaque test
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);
<?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;
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
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
Bref...
En espérant que tu aies compris ce qu'est l'écriture ternaire...
En reprenant ces lignes de code :
Ne penses tu pas que les 4 dernières lignes sont en trop ??
Ensuite.. côté JS
Tu as écrit
Sachant que le formadata est initialisé à la ligne
Ne penses tu pas logique de mettre les .append ... APRES ?
Donc