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 - 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;
}
?>

Afficher la suite

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

Réponse 101 / 109

flexi2202 Messages postés 3822 Date d'inscription Statut Membre Dernière intervention 190

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 3822 Date d'inscription Statut Membre Dernière intervention 190

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 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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 3822 Date d'inscription Statut Membre Dernière intervention 190

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 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

oui

Réponse 104 / 109

flexi2202 Messages postés 3822 Date d'inscription Statut Membre Dernière intervention 190

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 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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 3822 Date d'inscription Statut Membre Dernière intervention 190

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 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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 3822 Date d'inscription Statut Membre Dernière intervention 190

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 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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

Réponse 107 / 109

flexi2202 Messages postés 3822 Date d'inscription Statut Membre Dernière intervention 190

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 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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 3822 Date d'inscription Statut Membre Dernière intervention 190

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 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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

Réponse 109 / 109

flexi2202 Messages postés 3822 Date d'inscription Statut Membre Dernière intervention 190

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

Votre réponse