Barre de progression jquery ui par baraton - page 1

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"/>
</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 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>
        
      </form></div></div></div></body></html>

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

-
Edité par baraton 13 août 2016 à 17:46:41

Barre de progression jquery ui

Barre de progression jquery ui

Supprimer

Modérer

Signaler le message aux modérateurs