barre de progression

**rohim55** · 17/06/2008, 14h15

Bonjour,

je travaille sur un module d'upload de fichiers avec barre de progression. Pour l'instant je ne me suis pas attaqué à la barre mais juste aux informations de téléchargement tel que la taille du fichiers, la taille uploadée etc... Le problème je pense, c'est qu'il ne trouve pas le fichier temporaire, et donc les infos relatives. Je me suis aidé de beaucoup de tuto et de forum sans trouver le problème.Mais voici mon code

Mon fichier principal:

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	   "http://www.w3.org/TR/html4/loose.dtd">	
<html>
<head>
<title>== Progress ==</title>
<script type="text/javascript">
/*
    Temporise avant l'envoie de la requête pour éviter un bug
*/
function attendEnvoie() {
    setTimeout(testProgress,50);
}
 
/*
    Construit la requête xmlHttpRequest 
*/
function testProgress() {
    var idProgress=document.getElementById("progress_key").value;
 
    var xhr=new XMLHttpRequest();
 
    xhr.onload=tcb;//la fonction de rappel qui gère la réponse du serveur
    //la requête est envoyé en mode asynchrone(paramètre true) pour éviter de geler le navigateur
      xhr.open("GET","progress.xhr.php?progress_key="+idProgress,true);
	  xhr.onreadystatechange=handleRequestStateChange;
      xhr.send(null);
}
 
/*
    Permet d'annuler l'envoie des infos par le navigateur via la méthode stop() de l'objet window
    Peut provoquer le plantage du navigateur(ff2), à affiner ^^
*/
function annule() {
    //récupération de l'objet window de l'iframe
    var winIfrm=document.getElementById("tfrm").contentWindow;
    winIfrm.stop();
}
 
/*
    La fonction de rappel de l'objet xmlHttpRequest
*/
function tcb() {
    var repXhr=this.responseText; //récupération de la réponse du serveur via l'objet xmlHttpRequest (this)
 
    /*
        La réponse envoyé par le serveur étant au format texte il faut utiliser eval() pour la manipuler
        La réponse au format json ne peut être exploité directement par eval,
        il faut l'entourer de parenthèses via une concaténation pour éviter un bug
    */
    var objRep=eval("("+repXhr+")");
 
    document.getElementById("enCours").innerHTML=objRep.current;	
    document.getElementById("total").innerHTML=objRep.total;
    document.getElementById("tab").innerHTML=repXhr;
 
    //tant que l'upload est en cours le serveur est réinterrogé
    if (objRep.done==0) { testProgress(); }
}
 
 
</script>
</head>
<body>
<form enctype="multipart/form-data" target="tfrm" action="essai.php" method="post" onsubmit="attendEnvoie();">
	<input type="hidden" name="APC_UPLOAD_PROGRESS" id="progress_key" value="<?php echo uniqid();?>" >
	<input type="file" id="test_file" name="test_file"><br>
	<!-- histoire de tester la réaction lors d'un envoie multiple 
	<input type="file" id="test_file2" name="test_file2"><br>
	-->
	<input type="submit" value="Upload!">
	<input type="button" onclick="annule();" value="Annule">
</form>
<div id="rep" style="width:400px; height:200px; margin:10px; padding:10px;">
	<span id="enCours"></span> Ko sur <span id="total"></span> Ko
	<p>Tableau des infos de progression au format json :</p>
	<p id="tab"></p>
</div>
<iframe id="tfrm" name="tfrm" style="display:none;"></iframe>
</body>
</html>

Le fichier progress.xhr.php:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
<?php
if (isset($_GET['progress_key'])) {
    $rep=apc_fetch($_GET['progress_key']);      
    echo json_encode($rep);     
    exit;
}
?>

Merci d'avance pour votre aide

**tusssss** · 17/06/2008, 14h18

Utilise les balises CODE pour mettre en valeur ton bout de CODE, tu peux les obtenir en utilisant la petite icone # en haut de l'éditeur de texte.

Autrement faut vraiment être motivé pour le lire et t'aider. Alors après le repas

barre de progression

JavaScript

Vue hybride

Discussions similaires

Partager

Partager