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

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

voici mon fichier
merci
<?php
session_start();

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

109 réponses

Messages postés
3016
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
24 juillet 2021
139
merci jordane pour la pédagogie

ah d accord pour document.getElementById

mais alors dans mon cas cela ne sert a rien puisque je n ai pas de ID el ??

ouftiii pas mal cette démonstration avec les VAR
je m en souviendrais quand je vais en revoir ...

donc si je comprends bien dans mon code js

je dois supprimer ceci
var contenu = _("contenu").contenu[0];


et remplacer par
var input_contenu = _("contenu");
var contenu =input_contenu.value;
Messages postés
3016
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
24 juillet 2021
139
merci jordane pour la pédagogie
cela est très intéressant

donc comme on ne possède pas de id el
ce morceau de code ne sert plus a rien ?

si je comprends bien

je remplace
var contenu = _("contenu").contenu[0];


par

var input_contenu = _("contenu");
var contenu =input_contenu.value;



et donc cette ligne reste comme elle est
formdata.append("contenu", contenu);


et dans la partie php comment je rrends plus propre cette variable comme ceci

$contenu = !empty($_contenu["contenu"]) ? $_contenu["contenu"] : ""; 
Messages postés
33123
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 juillet 2021
3 634
aie... c'était bien... jusqu'à l'avant dernière ligne....
D'où tu me sors un $_contenu ?
Je te rappel que tu envois les données en POST
Messages postés
3016
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
24 juillet 2021
139
ah ben oui évidement j étais trop dans le bazar de ajax

donc comme pour le pseudo

$contenu = !empty($_post["contenu"]) ? $_post["contenu"] : ""; 
Messages postés
33123
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 juillet 2021
3 634
oui
Messages postés
3016
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
24 juillet 2021
139
merci jordane mais j ai encore une erreur dans ma console lors de l envois du fichier

Uncaught ReferenceError: uploadFile is not defined

Messages postés
33123
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 juillet 2021
3 634
tu as laissé trainer tes essais de code....
Vire la ligne 168 ... elle te génère une belle erreur dans ta page. ( pour voir l'erreur, il te suffit d'afficher le code source généré de la page et te rendre à la ligne 169 )
Messages postés
3016
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
24 juillet 2021
139
ah mince merci jordane
je n ai plus aucune erreur mais aucune trace du commentaire dans ma base de donnée
Messages postés
33123
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 juillet 2021
3 634
Commence par regarder si il est bien envoyé via le JavaScript.
Pour ça il faut que tu regardes l'anglais requête de la ligne post.
Et tu cherches certainement tout en bas la variable contenu et tu regardes si il y a une valeur avec.
Si oui, le souci ne vient donc pas du JavaScript.
Il faudra alors se pencher sur le code PHP.
Peux-tu également m'indiquer le format du champ que tu as ajouté en base de données..?est ce bien un champ de type text ou longtext ?
Messages postés
3016
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
24 juillet 2021
139
merci jordane pour l aide

alors en javascript c est bien envoyé puisque dans la console je le vois

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

et dans la requête tout est bon
alors c est dans le php

j ai donc en html le code pour le commentaire

  <div class="form-group">
                     <label for="contenu">Le message</label>
                     <textarea name="contenu"class="form-control" id="contenu" rows="3" placeholder="Message..." ></textarea>
                  </div>


ensuite nos variables propres

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

et l insertion base de donnee

                  //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
                  );
                  //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();
                  }
                }
              }


et donc voici comme se présente ma ligne dans ma base




le champs est un varchar
Messages postés
33123
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 juillet 2021
3 634
$_post ... À écrire en majuscule comme les autres.
Messages postés
3016
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
24 juillet 2021
139
misère
ces espaces , ces ' ou encore ces majuscules
dur dur la vie

mais bonne nouvelle cela fonctionne super bien a présent un giga merci jordane
une dernière chose est il possible d effacer le contenu du textarea après l envois du fichier
et pourquoi pas le nom du fichier uploader
Messages postés
33123
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 juillet 2021
3 634
Oui tu peux faire ça en javascript.
Il suffit d'utiliser la propriété value de tes deux éléments HTML.
En les mettant à vide.

document.getElementById("contenu").value="";


Ps: tu penseras à mettre le sujet en résolu et je t'invite à créer une nouvelle discussion pour ta prochaine question
Messages postés
3016
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
24 juillet 2021
139
ah c est super cela merci jordane

et donc je les inscris ou ces codes a quel endroit du code
je suppose a la fin

après ceci

   function errorHandler(event) {
        _("status").innerHTML = "Upload Failed";
      }
      function abortHandler(event) {
        _("status").innerHTML = "Upload Aborted";
      }


et pour l image ca sera donc

document.getElementById("photo").value="";



oui je mettrais en résolu des que je serais quoi pour ce dernier détail
Messages postés
33123
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 juillet 2021
3 634
Faut mettre ses ligne après celle où il y a le json parse
Messages postés
3016
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
24 juillet 2021
139
eh bien voila
c est enfin fini pour cette partie jordane encore une fois un très grand merci
passe une bonne soirée