Barre de progression JQUERY UI

Fermé

barale61 Messages postés 1208 Date d'inscription jeudi 13 septembre 2012 Statut Membre Dernière intervention 4 novembre 2024 - 25 juil. 2016 à 17:42
barale61 Messages postés 1208 Date d'inscription jeudi 13 septembre 2012 Statut Membre Dernière intervention 4 novembre 2024 - 13 août 2016 à 17:48

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.

<?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"/>
    
    <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> 
</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>
        
        
       
        
        
<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>

A voir également:

Barre de progression JQUERY UI
Windows 11 barre des taches a gauche - Guide
Barre verticale mac - Forum MacOS
Barré whatsapp - Guide
Egal barré - Forum Clavier
Barre de défilement - Guide

1 réponse

Réponse 1 / 1

barale61 Messages postés 1208 Date d'inscription jeudi 13 septembre 2012 Statut Membre Dernière intervention 4 novembre 2024 110
13 août 2016 à 17:48

J'ai modifié comme ceci et quand je sélectionne une image ma barre s'affiche bien mais ne défile pas. Il y en a bien ici qui ont fait ce cours?

Ligne 6, j'obtient le résultat "undefined".

    var inputElement = $('#fichier');
    inputElement.change(function(){
    var files = inputElement.attr('files');
    /*var file = files[0];*/
    var file = files;
    console.log(file);
    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
    console.log(loaded);
    $('#barre').progressbar('value', loaded);
    }
    xhr.onload = function(){
    $('#barre').progressbar('value', 100);
    }
    var form = new FormData();
    form.append('fichier', inputElement.file);
    xhr.send(form);
    });

Discussions similaires

Barre verticale droite sur clavier

Alt + = un égal barré = différence !

Comment faire le signe = barré?

Comment écrire le signe mathématique "différent de"?

Quelle touche clavier ou combinaison pour désigner "différent de