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   -
bonjour
a tous j ai un fichier d upload d image
mais j aurais souhaiter savoir comment venir y intégrer une barre de progression

voici mon fichier
merci 
<?php
session_start();

$dossier = 'uploads/';
$fichier = basename($_FILES['file']['name']);
$taille_maxi = 5000000;
$taille = filesize($_FILES['file']['tmp_name']);
$extensions = array('.png', '.PNG', '.gif', '.jpg', '.JPG', '.jpeg', '.JPEG');
$extension = strrchr($_FILES['file']['name'], '.'); 
//Début des vérifications de sécurité...
if(!in_array($extension, $extensions)) //Si l'extension n'est pas dans le tableau
{
     $erreur = 'Vous devez uploader un fichier de type png, gif, jpg, jpeg, txt ou doc...';
}
if($taille>$taille_maxi)
{
     $erreur = 'Le fichier est trop gros...';
}
 if(file_exists("uploads/" . $_FILES["file"]["name"])){
	$erreur = ' L\'image existe déjà.';
 }
if(!isset($erreur)) //S'il n'y a pas d'erreur, on upload
{
     //On formate le nom du fichier ici...
     $fichier = strtr($fichier, 
          'ÀÁÂÃÄÅÇÈÉÊËÌÍÎÏÒÓÔÕÖÙÚÛÜÝàáâãäåçèéêëìíîïðòóôõöùúûüýÿ', 
          'AAAAAACEEEEIIIIOOOOOUUUUYaaaaaaceeeeiiiioooooouuuuyy');
     $fichier = preg_replace('/([^.a-z0-9]+)/i', '-', $fichier);
     if(move_uploaded_file($_FILES['file']['tmp_name'], $dossier . $fichier)) //Si la fonction renvoie TRUE, c'est que ça a fonctionné..
		      {
          echo ' <span style="margin-left:30%;"> <br /> Upload effectué avec succès !  </span>';
		 	include('mabd.php');
		 $req =$bdd->prepare('INSERT INTO galerie_images ( nom_img, nom_min) VALUES ( :nom_img, :nom_min)');
         $req->execute(array(
			'nom_img' => $_FILES["file"]["name"],
			 'nom_min' => $_FILES["file"]["name"]
                                                   ));
     }
     else //Sinon (la fonction renvoie FALSE).
     {
          echo 'Echec de l\'upload !';
     }
}
else
{
     echo $erreur;
}
?>
A voir également:

109 réponses

Précédent
Réponse 61 / 109
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Comment, peux-tu avoir dans l' url le chemin vers le fichier cible PHP alors que tu fais de l'Ajax... ???
Tu n'as pas laissé le bouton en Submit par hasard ??

0
Réponse 62 / 109
flexi2202 Messages postés 3822 Date d'inscription   Statut Membre Dernière intervention   190
 
alors la jordane
c est surement pas a moi a poser cette question
cela reste du grand mystère
non je n ai rien changer a ton code 

<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>
0
Réponse 63 / 109
flexi2202 Messages postés 3822 Date d'inscription   Statut Membre Dernière intervention   190
 
alors la jordane je n en sais rien

non pas du tout j ai laisse le code tel quel 

<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>
0
Réponse 64 / 109
flexi2202 Messages postés 3822 Date d'inscription   Statut Membre Dernière intervention   190
 
désolé je pensais que le message n avait pas passé
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Non pas du tout dis tu...
et ça 
   <input type="submit"

....

Vu que tu fais de l'ajax, change le en 
  <input type="button"
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 65 / 109
flexi2202 Messages postés 3822 Date d'inscription   Statut Membre Dernière intervention   190
 
tu vas être déçu
car cela n a rien change ...même après le nettoyage du navigateur
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Ca change que lorsque tu envoies les données de ton formulaire .. tu restes sur ta page au lieu de partir sur la page fichier-cible.php non ???

NB: Tu peux aussi retirer l'attribut "action" de ton form.
0
Réponse 66 / 109
flexi2202 Messages postés 3822 Date d'inscription   Statut Membre Dernière intervention   190
 
oui en effet je ne parviens plus a passer sur la page fichier-cible.php

je retire ceci 

 action="cible-fichier.php?pseudo=<?php echo $pseudo;?>&id=<?php echo $id;?>"
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Ben c'est normal et c'est ce qu'on veut...
Vu que maintenant tu fais de l'Ajax...
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752 > jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention  
 
Ce qu'il faut désormais c'est nous dire ce que tu as dans la console
0
Réponse 67 / 109
flexi2202 Messages postés 3822 Date d'inscription   Statut Membre Dernière intervention   190
 
ah bon , c est toujours bon a savoir

voici la console , mais je ne parviens plus a passer sur la page fichier-cible.php

0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
ah bon , c est toujours bon a savoir

voici la console , mais je ne parviens plus a passer sur la page fichier-cible.php

Comment ça tu ne parviens plus à passer sur la page fichier-cible.php ....
COmment peux tu me dire OK c'est bon à savoir et ensuite me dire ça .. ???

Je te l'ai dit ...

Vu que désormais tu envoies ton formulaire en AJAX ... TU NE DOIS PLUS aller sur la page fichier-cible.php ....

Par contre, tu as un souci ...
Là on voit le code javascript dans ta page.......
Tu as du mal écrire les balises script ...
0
Réponse 68 / 109
flexi2202 Messages postés 3822 Date d'inscription   Statut Membre Dernière intervention   190
 
ah bon , c est toujours bon a savoir

voici la console , mais je ne parviens plus a passer sur la page fichier-cible.php

Comment ça tu ne parviens plus à passer sur la page fichier-cible.php ....
COmment peux tu me dire OK c'est bon à savoir et ensuite me dire ça .. ???

c est toujours bon a savoir avec le 
<input type="button"


Je te l'ai dit ...

Vu que désormais tu envoies ton formulaire en AJAX ... TU NE DOIS PLUS aller sur la page fichier-cible.php ....

comme la personne pouvait poster un commentaire après l upload sur la page fichier-cible.php
je modifierais le code pour qu'il puisse le faire sur la page form-fichier



Par contre, tu as un souci ...
Là on voit le code javascript dans ta page.......
Tu as du mal écrire les balises script ...

non le code est bien encadre
regarde

c est toujours celui que tu m as donne 

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


j ai également une question pourquoi avoir corriger la page fichier-cible.php si cela n est plus pour l utilisée ...
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
pourquoi avoir corriger la page fichier-cible.php si cela n est plus pour l utilisée ..

Qui a dit qu'elle n'est plus utilisée ?
On y fait appel à travers l'ajax...

Le principe :
Tu as un formulaire
Via javascript, tu récupères les infos qui s'y trouvent
Tu fais un appel AJAX via un script Javascript vers un script PHP en lui envoyant les données
Le script PHP renvoi une réponse dans le script ajax Javascript
0
Réponse 69 / 109
flexi2202 Messages postés 3822 Date d'inscription   Statut Membre Dernière intervention   190
 
ah d accord jordane ...
merci pour l information
je suis encore tres loin de pouvoir effectuer ce genre de chose hein

quoi qu il en soit
rien n a changer le code ajax est toujours dans le fond de la page
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Peux tu nous poster le code généré ( donc celui que tu récupères lorsque tu affiches ta page dans ton navigateur ) ?
(le code de la page qui contient le formulaire et le code javascript hein... pas du fichier cible... )
0
Réponse 70 / 109
flexi2202 Messages postés 3822 Date d'inscription   Statut Membre Dernière intervention   190
 
oui jordane c est celui que tu as corrige 

<?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 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="button" 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>
</html>
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
ça... ce n'est pas le code GENERE !!!!!

Le code généré ne contient pas de PHP !!!
0
Réponse 71 / 109
flexi2202 Messages postés 3822 Date d'inscription   Statut Membre Dernière intervention   190
 
mais c est bien le fichier qui contient le formulaire ...
je n ai que deux fichiers

un fichier" form-fichier.php"
et l autre "fichier-cible.php"

ah tu veux dire celui qui s affiche dans le code source du navigateur ?
0
Réponse 72 / 109
flexi2202 Messages postés 3822 Date d'inscription   Statut Membre Dernière intervention   190
  
<!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-->
        <!-- action="cible-fichier.php?pseudo= $ps-->
      <div class="container1" style=" max-width: 100%;margin:auto;">
           <form 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="button" 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>
</html>
0
Réponse 73 / 109
flexi2202 Messages postés 3822 Date d'inscription   Statut Membre Dernière intervention   190
 
je pense que la ligne 154 pose problème
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Tu dois avoir quelque chose qui modifie le fichier..

Au pire, et 3 lignes de commentaire.
0
Réponse 74 / 109
flexi2202 Messages postés 3822 Date d'inscription   Statut Membre Dernière intervention   190
 
voila donc le code n apparaît plus cette fois dans la bas de page

j ai une erreur juste au dessus de la console
j ai un message d erreur qu une feuille de style n a pas pu être chargée
j ai tout de suite pense a boostrap et la fin de page du modèle de base
j ai donc ajouter le bas de page
mais l erreur persiste

voici une copie de la console


0
Réponse 75 / 109
flexi2202 Messages postés 3822 Date d'inscription   Statut Membre Dernière intervention   190
 
je suis occupé a chercher l erreur tel quel sur google mais je la trouve pas

on ne parle pas de scss
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Ça ça n'a pas d'incidence sur le fonctionnement du script Ajax.
Tu pourras ouvrir une question dans le forum web master à ce sujet quand on aura terminé de traiter ton problème Ajax.
0
Réponse 76 / 109
flexi2202 Messages postés 3822 Date d'inscription   Statut Membre Dernière intervention   190
 
ok jordane ca me rassure
bon ben dans ce cas
voici la console avant le chargement du fichier et lorsque j essaye d uploader un fichier rien ne se passe

0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Donc là dans la console on voit bien laïdi et le pseudo parfait.

Maintenant toujours dans la console qu'as-tu lorsque tu fais un upload ?
Qu'as-tu dans l'onglet réponse ?
0
Réponse 77 / 109
flexi2202 Messages postés 3822 Date d'inscription   Statut Membre Dernière intervention   190
 
quand je fais un upload
voici ce que j ai dans la console


et voici dans reponse ce que j ai

0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Alors... on recommence ....

Tu fais un appel ajax en POST 
  ajax.open("POST", "cible-fichier.php");

Tu dois donc déplier la ligne qui commence par >post et pas un des >get !

Je vois au passage que ton bouton n'est pas bon.

Tu as mis un ONCHANGE .... sauf qu'un bouton.. ben..ça ne change pas... 
onchange="uploadFile()">

A la place, il faut mettre un ONCLICK 
onclick="uploadFile()">
0
Réponse 78 / 109
flexi2202 Messages postés 3822 Date d'inscription   Statut Membre Dernière intervention   190
 
merci pour l aide jordane

pour le POST c est ok

concernant le bouton ONCHANGE
il venait du code que tu m avais donne
mais bref j ai change

dans la console je n ai que des GET

voici une capture avant l upload


et une après l upload il y a du nouveau enfin

0
Réponse 79 / 109
flexi2202 Messages postés 3822 Date d'inscription   Statut Membre Dernière intervention   190
 
ensuite je clic sur ok et la il y a la barre de progression qui fonctionne
mais le fichier n est pas dans la base de donnée ni dans le dossier upload
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Encore une fois, donne-moi le contenu de la réponse
0
Réponse 80 / 109
flexi2202 Messages postés 3822 Date d'inscription   Statut Membre Dernière intervention   190
 
ok jordane
voici donc la réponse avec un POST

cela a été effectue après l upload

0