Ajout d une barre de progression sur l upload des images

[Résolu]
Signaler
Messages postés
3046
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
1 août 2021
-
Messages postés
3046
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
1 août 2021
-
bonjour
a tous j ai un fichier d upload d image
mais j aurais souhaiter savoir comment venir y intégrer une barre de progression

voici mon fichier
merci
<?php
session_start();

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

109 réponses

Messages postés
3046
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
1 août 2021
139
voici le fichier message complet

https://www.cjoint.com/doc/21_05/KEFvs4XStS2_1.txt
Messages postés
33196
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
2 août 2021
3 650
Je ne t'ai pas demandé l'onglet REQUETE .... mais l'onglet

REPONSE

!!!!!

Fais un effort .... on en est déjà à 140 messages pour un truc qui aurait du en prendre au max 10 !!
Messages postés
3046
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
1 août 2021
139
euhhh je suis pas le seul responsable ...
mais j apprécie tout ce que tu fais
voici donc la réponse

Messages postés
33196
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
2 août 2021
3 650
Attends... je code de tête en m'appuyant sur tes codes ...
Ce n'est quand même pas de ma faute si ils sont bourrés d'erreurs et si tu n'es pas capable de les corriger par toi même ... si ?!!

Quoi qu'il en soit,
peux tu cliquer sur le petit bouton à droite "brut"

NB: J'ai créé un compte "jordane45"
Tu devrais me donner accès à cette page histoire que je puisse aller voir par moi même.. on gagnerait du temps
Messages postés
3046
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
1 août 2021
139
voila je vois que tu as crée une journée de pêche
donc tu connais le fonctionnement a présent

voici une copie avec le bouton brut activer

Messages postés
33196
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
2 août 2021
3 650
Tu as encore un IF qui n'était pas fermé ( la vérif de la taille de l'image)
Essaye comme ça
<?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>';
        }else{
          // Vérifie le type MIME du fichier
          if (in_array($filetype, $allowed)) {
              // Vérifie si le fichier existe avant de le télécharger.
              if (file_exists("uploads/" . $photos["name"])) {
                  $err =  $photos["name"] . ' existe déjà.</br> <a href="javascript:history.back()">Pour recommencer</a>';
              } else {
                if(! move_uploaded_file($photos["tmp_name"], "uploads/" . $photos["name"])){
                  $err = "Erreur lors de l'upload du fichier";
                }else{
                  $res['message'] = '<style="font-size:22px; margin-left:20%; margin-top:90px;text-align: center;">Votre fichier a été téléchargé avec succès.>';
                  
                  //préparation de la requête et des variables
                  $sql = 'INSERT INTO galerie_images (pseudo, id_img, nom_img, nom_min) VALUES (:pseudo, :id_img, :nom_img, :nom_min)';
                  $datas = array(
                      ':pseudo' => $pseudo,
                      ':id_img' => $id,
                      ':nom_img' => $filename,
                      ':nom_min' => $filename
                  );
                  //exécution de la requêete préparée
                  try{
                    $req = $bdd->prepare($sql);
                    $req->execute($datas);
                  }catch(Exception $e){
                    $err = " Erreur dans la requête : " . $e->getMessage();
                  }
                }
              }
          } else {
            $err = 'Error: Il y a eu un problème de téléchargement de votre fichier. Veuillez réessayer.</br> <a href="javascript:history.back()">Pour recommencer</a>';
          }
        }
      }
    } else  {
      $debug = ['POST'=>$_POST,'FILE'=>$_FILES];
      $err =  "Error: " . $photos["error"] . "   ---  " . print_r($debug,true);
    } 
  } else {
    $err = "Méthode invalide"; 
  }
  
  $res['error'] = $err;
  
  // On renvoi la réponse au format JSON
  echo json_encode($res);
 exit;

Messages postés
3046
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
1 août 2021
139
merci jordane encore et encore merci pour ce code
mais cela ne fonctionne pas encore

voici la réponse de POST

Messages postés
33196
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
2 août 2021
3 650
Dans l'onglet requête, on peut voir qu'il envoi
form-data; name="pseudo "

On voit qu'il y a un espace en trop après le o
et en effet, il y a une erreur dans le js
  formdata.append("pseudo ", pseudo );

A corriger par
  formdata.append("pseudo", pseudo );

Et cette fois.. ça devrait être bon.
Messages postés
3046
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
1 août 2021
139
mais cette fois les images vont bien dans le dossier uploads
par contre rien dans la base de donnée
Messages postés
3046
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
1 août 2021
139
je n en reviens pas cela fonctionne enfin
tout cela pour un espace de trop

un très très grand merci jordane tu as fini par solutionner mon problème
et de nouveau j ai encore appris pas mal de choses

toutes mes félicitations pour cet exploit

concernant les codes de ces journées de pêches c est une personne de plus de 70 ans qui me les avais fais ...
mais bon je le remercie aussi
cela était au début ou je ne savais pas encore que le php commençait par des balises
pour te dire ...
mais je me rends compte que je vais devoir les reprendre une a une et améliorer le codage


encore merci

passe une bonne nuit
Messages postés
3046
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
1 août 2021
139
bonjour a tous

voila a présent je souhaiterais pouvoir ajouter un commentaire a la photo
es ce possible de le faire de manière simple sans devoir changer tout le code
Messages postés
33196
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
2 août 2021
3 650
En même temps que tu envoies la photo ?
Si oui, il suffit de faire comme pour le pseudo
Messages postés
3046
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
1 août 2021
139
merci pour l aide
oui en temps que l envois de la photo
je viens d essayer mais bien évidement cela ne fonctionne pas

je dois ouvrir un nouveau sujet ?
Messages postés
3046
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
1 août 2021
139
j ai réparer plusieurs erreurs mais il y en a une qui me résiste

voici la console

Messages postés
33196
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
2 août 2021
3 650
Le problème ne vient pas du code JS mais du fichier php
Donc, pour voir ce qu'il se passe... ouvre le >post et regarde l'onglet reponse
Messages postés
3046
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
1 août 2021
139
merci pour ton aide
ah ben c est déjà une bonne nouvelle cela
dans l onglet réponse il n y a rien

Messages postés
33196
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
2 août 2021
3 650
Tu as modifié quoi dans le fichier php ?
Messages postés
3046
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
1 août 2021
139
dans la page fichier-from
j ai ajouter ceci

$contenu = !empty($_FILES["contenu"]) ? $_FILES["contenu"] : NULL;  


et j ai modifier ceci

//préparation de la requête et des variables
                  $sql = 'INSERT INTO galerie_images (pseudo, id_img, nom_img, nom_min, contenu ) VALUES (:pseudo, :id_img, :nom_img, :nom_min, :contenu)';
                  $datas = array(
                      ':pseudo' => $pseudo,
                      ':id_img' => $id,
                      ':nom_img' => $filename,
                      ':nom_min' => $filename
					  ':contenu ' => $contenu
                  );


et j ai bien évidement ajouter ceci en html

 <div class="form-group">
                     <label for="contenu">Le message</label>
                     <textarea name="contenu"class="form-control" id="contenu" rows="3" placeholder="Message..." ></textarea>
                  </div>
Messages postés
3046
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
1 août 2021
139
voila j ai trouve l erreur
il manquait une virgule a $filename

   $datas = array(
                      ':pseudo' => $pseudo,
                      ':id_img' => $id,
                      ':nom_img' => $filename,
                      ':nom_min' => $filename,
					  ':contenu' => $contenu
                  );


mais j ai une autre erreur

j essaye de trouver ...
Messages postés
3046
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
1 août 2021
139
voici ce que j ai
ca ressemble a une erreur d hier

Messages postés
33196
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
2 août 2021
3 650
ben ça te dit que la colonne contenu ne peut pas être vide dans la bdd.

Actuellement, si tu ne remplis pas de commentaire, ça essaye de mettre NULL dans la bdd.
A la place, il faudrait mettre une chaine vide ""

Avec quelle ligne de code initialises tu la variable pour le commentaire dans le fichier php ?
La valeur par défaut est à NULL je suppose.
Messages postés
3046
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
1 août 2021
139
merci pour les renseignements et l explication jordane

lors de l essai j ai mis un commentaire ...

avec celle ci

$contenu = !empty($_FILES["contenu"]) ? $_FILES["contenu"] : NULL;


et je ne sais pas si cela est valable mais vu le codage foireux que la personne agee m a fait
pour que le code fonctionne j a vais mis dans ma base de donnée a la colonne contenu
tel que défini 0
Messages postés
33196
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
2 août 2021
3 650
$contenu = !empty($_FILES["contenu"]) ? $_FILES["contenu"] : "";  
Messages postés
3046
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
1 août 2021
139
je n ai plus d erreur jordane merci
mais dans la colonne contenu de ma base de donnée le commentaire que j ai écrit dans le formulaire n y apparaît pas

Messages postés
33196
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
2 août 2021
3 650
au niveau du JS .. tu as ajouté le commentaire également dans l'envoi ajax ?
Messages postés
3046
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
1 août 2021
139
il me manque peut être la VAR contenu
var contenu = _("contenu").contenu[0];



autrement je ne vois pas bien ce que j aurais oublie

<script >
     //--------------------------------------------------------//     
     
     //--------------------------------------------------------//
     
      var pseudo = '<?php echo $pseudo;?>';
      var id= '<?php echo $id ;?>';
   //var contenu = '<?php echo $contenu ;?>';
      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);
        formdata.append("contenu", contenu);
        //le temps des tests : 
        alert('pseudo:' + pseudo + '  id: ' + id+ '  contenu: ' + contenu);
        console.log('ID',id,'PSEUDO',pseudo,'CONTENU',contenu); // 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>
Messages postés
33196
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
2 août 2021
3 650
ben oui
a mettre avant la ligne 22 bien entendu.
Messages postés
3046
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
1 août 2021
139
j ai essaye la modification suivante jordane
mais cela ne passe pas

apparemment j ai du mal définir la variable

      function uploadFile(){
        var file = _("photo").files[0];
		var contenu = _("contenu").contenu[0];
        var formdata = new FormData();
        formdata.append("photo", file);
        formdata.append("pseudo", pseudo );
        formdata.append("id", id);
        formdata.append("contenu", contenu);
        //le temps des tests : 
        alert('pseudo:' + pseudo + '  id: ' + id+ '  contenu: ' + contenu);
        console.log('ID',id,'PSEUDO',pseudo,'CONTENU',contenu); // pour voir si les variables se remplissent bien dans la console;..


Messages postés
33196
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
2 août 2021
3 650
Il vient d'où ce [0] ?

As tu regardé ce que fait la fonction _() et ce qu'elle retourne ?
Messages postés
3046
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
1 août 2021
139
euhhh je sais pas jordane j ai fait comme avec la variable file

comment je peux voir ce que cette variable retourne avec un var_dump ??

car avec ceci

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

cela ne fonctionne pas car on bloque sur la variable contenu

d ailleurs le message dans la console est clair cela ce passe bien dans

Uncaught ReferenceError: uploadFile is not defined

j ai aussi essaye avec cela

 var file = _("photo").files[0];
		var contenu = _("contenu").contenu;
		var contenu = '<?php echo $contenu ;?>';
        var formdata = new FormData();
        formdata.append("photo", file);
        formdata.append("pseudo", pseudo );
        formdata.append("id", id);
        formdata.append("contenu", contenu);


dans l espoir de voir apparaître la variable contenu
Messages postés
33196
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
2 août 2021
3 650
Je ne t'ai pas demandé de savoir ce que contenait la variable contenu mais si tu avais regarder le fonctionnement de la fonction _()
Histoire de comprendre ce qu'elle fait et ce qu'elle retourne comme type de variable...
Est-ce que au moins tu as trouvé cette fonction dans ton code...
Petit indice, elle se trouve au début de ton JavaScript..
Messages postés
3046
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
1 août 2021
139
honnêtement je ne sais pas du tout a quoi sert cette variable et c est que depuis le début j ai envie de la retirer mdrrr

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


d après une recherche sur le web
La méthode JavaScript getElementById() permet de récupérer les informations d'une balise identifiée par son id.

donc j en aurais besoin de deux ..puisque deux id
Messages postés
33196
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
2 août 2021
3 650
ça ne récupère pas les "infos" mais ça "pointe" l'objet

La fonction _(el) est juste un raccourci pour ne pas avoir à écrire le code entier à chaque fois.

Donc,

En gros, si tu as un input dont l'id est "content"
var element = document.getElementById("content");

Ici, element est une "représentation" de ton input.

Un input dispose de propriétés et de méthodes.
Pour en récupérer le contenu, on va appeller la propriété "value"

Si on reprend ton code js :
var input_contenu = _("contenu");
var contenu =input_contenu.value;