IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Barre de progression [UI]


Sujet :

jQuery

  1. #1
    Membre régulier
    Homme Profil pro
    Lycéen
    Inscrit en
    Février 2013
    Messages
    176
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Orne (Basse Normandie)

    Informations professionnelles :
    Activité : Lycéen

    Informations forums :
    Inscription : Février 2013
    Messages : 176
    Points : 90
    Points
    90
    Par défaut Barre de progression
    Bonjour,

    J'aimerais savoir si un d’entre vous a réussi à faire fonctionner la barre progression car je n'y arrive pas et si on veut essayer, le lien du cours pour tester est erroné ou n'existe plus. Mon upload php fonctionne bien, mais la barre ne s'affiche pas.

    Je me permets de poster et le jquery est en bas de page.

    Je vous remercie de votre aide.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
     
    <?php
    include 'upload.php';
     
        if (isset($_POST['envoyer']))
        {
            $photo = $_FILES['fichier']['name'];
            $photo_tmp = $_FILES['fichier']['tmp_name'];
            $taille_maxi = 10485760;
            $taille_finale = $taille_maxi / 1000000;
            $taille = filesize($_FILES['fichier']['tmp_name']);
            $errors = array();
             
            if (!empty($photo_tmp))
            {
                $image=explode('.',$photo);
                $image_ext=end($image);
                if(in_array(strtolower($image_ext),array('png','jpg','jpeg','gif')) === false){
                    $errors[] = "<div class=\"card\">
                                    <div class=\"card-content red white-text col s12 m12 l4\">
                                    Le type d'image (<b>.".$image_ext."</b>) n'est pas valide. Seules les extensions .png, .jpg, .jpeg, et .gif sont autorisées !
                                    </div>
                                </div>"; 
                }
                if($taille>$taille_maxi){
                    $errors[] = "<div class=\"card\">
                                    <div class=\"card-content red white-text col s12 m12 l4\">
                                    L'image <b>" .$photo." </b>est trop volumineuse le maximum autorisé est de <b>" .round($taille_finale). " Mo</b>
                                    </div>
                                </div>"; 
                }
            }
     
            if (empty($errors)){
                upload($photo_tmp);
            }
            else{
                foreach($errors as $error)
                {
                    // On crée la session avant d'afficher l'erreur
                    $_SESSION['mon_tableau'] = array($_POST['denomination'],$_POST['contact'],$_POST['adresse'],$_POST['cp'],$_POST['ville'],$_POST['email'],$_POST['telephone'],$_POST['portable'],$_POST['commentaire']);
                    echo $error;
                }
            }
        }
    ?>
    <!doctype html>
    <head>
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/smoothness/jquery-ui.css" />
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="css/materialize.css"  media="screen,projection"/>
    </head>
    <body>
    <div class="row">
        <div class="col s12 m12 l6">
     
      <div class="row">
        <form action="" method="post" name="frm" id="frm" enctype="multipart/form-data" class="col s12">
            <div class="file-field input-field">
                  <div class="btn btn-block blue">
                    <span>Fichiers</span>
                    <!--<input type="hidden" name="MAX_FILE_SIZE" value="10485760">-->
                    <input type="file" name="fichier" id="fichier">
                  </div>
                  <div class="file-path-wrapper">
                    <input class="file-path validate" type="text" placeholder="Téléchargez des fichiers">
                  </div>
            </div> 
     
          <div class="row">
            <div class="input-field col s12 m6 l8">
                <button class="btn btn-block blue" id="envoyer" name="envoyer" type="submit">Envoyer<i class="material-icons right">send</i></button>
            </div></form></div></div></div>
     
    <div id="barre"></div>
     
    <script>
        var inputElement = $('#fichier');
        inputElement.change(function(){
        var files = inputElement.attr('files');
        var file = files[0];
        var xhr = new XMLHttpRequest();
        $('#barre').progressbar({ value: 0 }); // on initialise le plugin
        xhr.open('POST', 'upload.php');
        xhr.onprogress = function(e){
        var loaded = Math.round((e.loaded / e.total) * 100); // on calcul le pourcentage de progression
        $('#barre').progressbar('value', loaded);
        }
        xhr.onload = function(){
        $('#barre').progressbar('value', 100);
        }
        var form = new FormData();
        form.append('fichier', inputElement.file);
        xhr.send(form);
        });      
    </script>   
     
            <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
            <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
            <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
            <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
     
          </body></html>

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 957
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 957
    Points : 44 121
    Points
    44 121
    Par défaut
    Bonjour,
    Je me permets de poster et le jquery est en bas de page.
    le chargement de jQuery doit se faire avant son utilisation.

    ... le lien du cours pour tester est erroné ou n'existe plus.
    Les ressources du pluggin sont tout à fait disponibles : Progressbar

  3. #3
    Expert éminent sénior

    Homme Profil pro
    Développeur Web
    Inscrit en
    Septembre 2010
    Messages
    5 380
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Septembre 2010
    Messages : 5 380
    Points : 10 410
    Points
    10 410
    Par défaut
    Salut,

    Le module Progressbar de jQuery est sans grand intérêt... Pour le même prix (en termes de chargement de librairie) tu peux utiliser cette classe d'upload Ajax/jQuery qui implémente la progressbar mais aussi (si besoin) le temps restant et une dizaine d'informations en temps réel dont l'affichage des vignettes quand il s'agit d'images, ou les informations EXIF des photos provenant d'un appareil photo numérique ou la possibilité de recadrage (crop) avant uplload, etc. Le tout en surpassant les limites serveur avec la possibilité de reprise d'upload pour les gros fichiers en utilisant la partie automatiquement sauvegardée.

    Tu pourras commencer à faire les premiers essais en moins de trois minutes en décompressant simplement le zip et en copiant le dossier sur ton serveur car la classe est fournie avec une vingtaine d'exemples fonctionnels prêts à l'emploi avec php côté serveur. Pour les autres technologies serveur l'intérêt est moins évident car il faut développer les scripts côté serveur, mais puisque tu utilises php ce module d'upload peut te faire gagner beaucoup de temps. C'est gratuit et dispo chez developpez.net

  4. #4
    Expert éminent sénior

    Homme Profil pro
    Développeur Web
    Inscrit en
    Septembre 2010
    Messages
    5 380
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Septembre 2010
    Messages : 5 380
    Points : 10 410
    Points
    10 410
    Par défaut
    Citation Envoyé par ABCIWEB Voir le message
    Le module Progressbar de jQuery est sans grand intérêt...
    J'avais oublié de préciser pourquoi : tous les navigateurs qui supportent new FormData() ont leur propre progressbar prévue pour s'intégrer au mieux dans le navigateur. Donc il sert à rien le module progressbar de jquery dans ce contexte, autant programmer directement la balise <progress>.

  5. #5
    Membre régulier
    Homme Profil pro
    Lycéen
    Inscrit en
    Février 2013
    Messages
    176
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Orne (Basse Normandie)

    Informations professionnelles :
    Activité : Lycéen

    Informations forums :
    Inscription : Février 2013
    Messages : 176
    Points : 90
    Points
    90
    Par défaut Barre de progression jquery ui
    J'ai fait comme ça, mais cela ne fonctionne toujours pas. Et comme mon upload fonctionne bien, je préfère l'utiliser.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    <?php
    include 'upload.php';
     
        if (isset($_POST['envoyer']))
        {
            $photo = $_FILES['fichier']['name'];
            $photo_tmp = $_FILES['fichier']['tmp_name'];
            $taille_maxi = 10485760;
            $taille_finale = $taille_maxi / 1000000;
            $taille = filesize($_FILES['fichier']['tmp_name']);
            $errors = array();
            
            if (!empty($photo_tmp))
            {
                $image=explode('.',$photo);
                $image_ext=end($image); 
                if(in_array(strtolower($image_ext),array('png','jpg','jpeg','gif')) === false){
                    $errors[] = "<div class=\"card\">
                                    <div class=\"card-content red white-text col s12 m12 l4\">
                                    Le type d'image (<b>.".$image_ext."</b>) n'est pas valide. Seules les extensions .png, .jpg, .jpeg, et .gif sont autorisées !
                                    </div>
                                </div>";  
                }
                if($taille>$taille_maxi){
                    $errors[] = "<div class=\"card\">
                                    <div class=\"card-content red white-text col s12 m12 l4\">
                                    L'image <b>" .$photo." </b>est trop volumineuse le maximum autorisé est de <b>" .round($taille_finale). " Mo</b>
                                    </div>
                                </div>";  
                }
            }
     
            if (empty($errors)){
                upload($photo_tmp);
            }
            else{
                foreach($errors as $error)
                {
                    // On crée la session avant d'afficher l'erreur
                    $_SESSION['mon_tableau'] = array($_POST['denomination'],$_POST['contact'],$_POST['adresse'],$_POST['cp'],$_POST['ville'],$_POST['email'],$_POST['telephone'],$_POST['portable'],$_POST['commentaire']);
                    echo $error;
                }
            }
        }
    ?>
    <!doctype html>
    <head>
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/smoothness/jquery-ui.css" />
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="css/materialize.css"  media="screen,projection"/>
    </head>
    <body>
     
    <div class="row">
        <div class="col s12 m12 l6">
     
      <div class="row">
        <form action="" method="post" name="frm" id="frm" enctype="multipart/form-data" class="col s12">
            <div class="file-field input-field">
                  <div class="btn btn-block blue">
                    <span>Fichiers</span>
                    <!--<input type="hidden" name="MAX_FILE_SIZE" value="10485760">-->
                    <input type="file" name="fichier" id="fichier">
                  </div>
                  <div class="file-path-wrapper">
                    <input class="file-path validate" type="text" placeholder="Téléchargez des fichiers">
                  </div>
            </div>  
     
          <div class="row">
            <div class="input-field col s12 m6 l8">
                <button class="btn btn-block blue" id="envoyer" name="envoyer" type="submit">Envoyer<i class="material-icons right">send</i></button>
            </div>
     
            <div class="progress">
                <div class="determinate" style="width: 10%"></div>
            </div>
     
     
            <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
            <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
            <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
            <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>        
     
     
    <script>
        var inputElement = $('#fichier');
        inputElement.change(function(){
        var files = inputElement.attr('files');
        var file = files[0];
        var xhr = new XMLHttpRequest();
        $('#progress').progressbar({ value: 0 }); // on initialise le plugin
        xhr.open('POST', 'upload.php');
        xhr.onprogress = function(e){
        var loaded = Math.round((e.loaded / e.total) * 100); // on calcul le pourcentage de progression
        $('#progress').progressbar('value', loaded);
        }
        xhr.onload = function(){
        $('#progress').progressbar('value', 100);
        }
        var form = new FormData();
        form.append('fichier', inputElement.file);
        xhr.send(form);
        });       
    </script>    
     
     
          </form></div></div></div></body></html>

  6. #6
    Expert éminent sénior

    Homme Profil pro
    Développeur Web
    Inscrit en
    Septembre 2010
    Messages
    5 380
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Septembre 2010
    Messages : 5 380
    Points : 10 410
    Points
    10 410
    Par défaut
    Ton upload fonctionne bien tant que tu n'essaies pas de télécharger un fichier qui dépasse la config "post_max_size" du serveur sinon les super globales $_POST et $_FILES seront vides et dans ce cas tu n'entreras jamais dans la condition if (isset($_POST['envoyer'])).

    Après c'est vrai que pour un upload simple il est rare qu'une photo à elle seule dépasse cette configuration - que tu peux connaitre avec ini_get('post_max_size') - , mais sur le principe ton système ne gère pas cette erreur. Si tu veux faire les choses jusqu'au bout et avoir un code réutilisable en toutes circonstances (y compris pour les upload multiples par exemple) tu peux utiliser la fonction php "register_shutdown_function" pour intercepter cette erreur fatale.

    Comme déjà dit, la progress barre de jQuery ne sert à rien, elle n'a aucune propriété magique supplémentaire par rapport aux progress bar des navigateurs et puisque de plus tu fais tes requêtes ajax en javascript vanilla (sans lib), tu n'as aucun intérêt à charger jquery+jquery ui uniquement pour cela.

    Enfin bon si tu y tiens absolument, c'est quoi toutes ces lignes de chargement pour jquery ? Tu charges la version 1.12.4 et la version 2.1.1, et un complément ui 1.8 dont tu charges les css mais pas le moteur qui va avec. Faudrait faire du ménage... Tu ne devrais avoir que 3 lignes de chargement, une pour le moteur, une pour les fonctionnalités ui et une dernière pour les styles. Mais si c'est juste pour charger une barre de progression que tous les navigateurs compatibles avec l'upload ajax implémentent déjà par défaut...

    A savoir aussi que ton code fonctionnera uniquement pour des versions IE >= 10. Pour les navigateurs plus anciens faudrait employer une autre technique en complément ou au minimum envoyer un message pour dire que le navigateur n'est pas compatible.

    Pour débuguer ton script, utilises console.log() pour connaitre les états de tes variables dans la console. Par exemple
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    //...
    var loaded = Math.round((e.loaded / e.total) * 100);
    console.log(loaded);
    //..
    au moins cela te permettras de voir ce qui fonctionne ou pas.


    Après comme déjà dit je t'ai proposé un module plus haut qui dispose de beaucoup plus de puissance (surpasse les configuration serveur) avec la possibilité d'afficher toutes les informations en temps réel que tu veux d'une manière enfantine. Par exemple ces trois lignes suffisent pour afficher la vignette de prévisualisation (si le fichier est une image), le nom du fichier et la progression graphique :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <span class="UpAbci_imgPreview"></span><!-- vignette de prévisualisation (si le fichier est une image) -->
    <span class="UpAbci_name"></span><!-- nom du fichier -->
    <progress class="UpAbci_progressionG"></progress><!-- progression graphique -->
    C'est le même principe pour faire afficher le temps restant, le poids, le temps passé, le résultat de l'upload, etc. Et puis on peut avoir l'information que le fichier n'a pas la bonne extension ou qu'il est trop gros dès la sélection du fichier sans besoin de le soumettre et d'attendre le retour du serveur (meilleur confort utilisateur et économie des ressources serveur).

    Bien sûr c'est bien aussi de développez son propre code, mais l'upload ajax est moins facile qu'il n'y paraît et ce n'est pas l'exercice idéal pour apprendre car mieux vaut avoir suffisamment de recul pour connaître les problèmes potentiels inhérents.

  7. #7
    Membre régulier
    Homme Profil pro
    Lycéen
    Inscrit en
    Février 2013
    Messages
    176
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Orne (Basse Normandie)

    Informations professionnelles :
    Activité : Lycéen

    Informations forums :
    Inscription : Février 2013
    Messages : 176
    Points : 90
    Points
    90
    Par défaut Barre de progression jQuery
    Merci de ta réponse je vais regarder tout ça quand j'aurai un moment.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Indy FTP (idFTP) faire une barre de progress de transfert
    Par Harry dans le forum Web & réseau
    Réponses: 4
    Dernier message: 09/07/2004, 13h15
  2. [VB.NET] Pb avec le bouton Annuler d'1 barre de progression
    Par dada1982 dans le forum Windows Forms
    Réponses: 3
    Dernier message: 30/06/2004, 09h56
  3. Réponses: 12
    Dernier message: 27/05/2004, 00h13
  4. [DEBUTANT] Barre de progression
    Par pupupu dans le forum MFC
    Réponses: 4
    Dernier message: 18/01/2004, 16h47
  5. [web] Barre de Progression ASCII
    Par Red Bull dans le forum Web
    Réponses: 13
    Dernier message: 05/06/2003, 12h56

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo