Ajout d une barre de progression sur l upload des images

Résolu/Fermé

flexi2202 Messages postés 3784 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 30 mars 2024 - 26 mai 2021 à 16:26
flexi2202 Messages postés 3784 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 30 mars 2024 - 1 juin 2021 à 19:38

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:

Barre de progression word
Supprimer une page word - Guide
Espace insécable word - Guide
Organigramme word - Guide
Word gratuit - Guide
Signature électronique word - Guide

109 réponses

Réponse 101 / 109

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

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;

Réponse 102 / 109

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

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"] : "";

jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
1 juin 2021 à 18:01

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

Réponse 103 / 109

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

ah ben oui évidement j étais trop dans le bazar de ajax

donc comme pour le pseudo

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

jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
1 juin 2021 à 18:06

oui

Réponse 104 / 109

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

merci jordane mais j ai encore une erreur dans ma console lors de l envois du fichier

Uncaught ReferenceError: uploadFile is not defined

jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
1 juin 2021 à 18:21

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 )

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

Posez votre question

Réponse 105 / 109

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

ah mince merci jordane
je n ai plus aucune erreur mais aucune trace du commentaire dans ma base de donnée

jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
1 juin 2021 à 18:37

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 ?

Réponse 106 / 109

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

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

jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
1 juin 2021 à 18:49

$_post ... À écrire en majuscule comme les autres.

Réponse 107 / 109

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

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

jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
Modifié le 1 juin 2021 à 19:04

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

Réponse 108 / 109

flexi2202 Messages postés 3784 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 30 mars 2024 179
1 juin 2021 à 19:11

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

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

Faut mettre ses ligne après celle où il y a le json parse

Réponse 109 / 109

flexi2202 Messages postés 3784 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 30 mars 2024 179
1 juin 2021 à 19:38

eh bien voila
c est enfin fini pour cette partie jordane encore une fois un très grand merci
passe une bonne soirée

Discussions similaires

Barre verticale droite sur clavier

Symbole Attention dans Word

Barre verticale droite sur clavier mac

Discussions similaires

Newsletters