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>