Affichage Javascrip/APC(php)
Bonjour,
Après bien des problèmes de version APC/PHP pour windows j'ai enfin résolu ce premier problème, mais aussitôt fonctionnel voila le deuxième problème ou je me casse les dents depuis une semaine qui est le javascript (ou vraiment je n'y connais rien ou pas grand chose pour le moment) Donc grâce à l'aide d'un tiers j'ai réussit tant que bien à afficher une barre d'upload lors d'un téléchargement de fichier (formulaire / FTP) et mon problème actuel est que sous mozilla FF la barre de progression s'affiche parfaitement bien mais par contre sous IE8 et Chrome (google) elle reste fixe à 0%.
Pour info si utiles: version php: 5.2.8, version APC: 3.0.19 et voila la configuration des variable APC:
Citation:
apc.cache_by_default On On
apc.coredump_unmap Off Off
apc.enable_cli Off Off
apc.enabled On On
apc.file_update_protection 2 2
apc.filters no value no value
apc.gc_ttl 3600 3600
apc.include_once_override Off Off
apc.max_file_size 400M 5M
apc.num_files_hint 0 0
apc.report_autofilter Off Off
apc.rfc1867 On On
apc.rfc1867_freq 0 0
apc.rfc1867_name APC_UPLOAD_PROGRESS APC_UPLOAD_PROGRESS
apc.rfc1867_prefix upload_ upload_
apc.shm_segments 1 1
apc.shm_size 64M 30
apc.slam_defense 0 0
apc.stat On On
apc.stat_ctime Off Off
apc.ttl 0 0
apc.user_entries_hint 0 0
apc.user_ttl 0 0
apc.write_lock On On
Voila les codes que j'utilise pour l'upload:
Formulaire:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!-- début du formulaire -->
<?php
if(empty($_SESSION['message_erreur_upload']))
{
?>
<h3>bravo la connexion FTP est OK vous pouvez télécharger votre fichier</h3><br/>
<?php
}
?>
<h2>Après avoir validé le formulaire ci-dessous, ne fermez pas le navigateur avant d'y être invité par le message de confirmation d'upload.</h2><br/><br/>
<form name="upload_fichier_ftp" method="post" enctype="multipart/form-data" action="upload_fichiers_sur_ftp_clients.html" onSubmit="attendEnvoie();"><p>
<input type="hidden" name="APC_UPLOAD_PROGRESS" id="progress_key" value="<?php echo $_SESSION['uniquid'];?>">
Selectionner votre fichier <b>(Maxi 150Mo)</b>: <input name="file_upload" type="file" size="80" /><br/>
<input name="post_fichier_ftp" type="submit" value="envoyer"/>
</p></form>
<!-- Barre de progression -->
<div id="progress_conteneur" style="position:relative;overflow:hidden;width:200px;height:20px;border:1px solid black;">
<div id="progress_barre" style="position:absolute;font-size:0;top:0px;left:0px;height:20px;background:#FF0000;"></div>
<span id="progress_texte" style="position:absolute;font-size:12pt;">0 %</span></div> |
Le code Javascript:
Code:
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
|
/*
Temporise avant l'envoie de la requête pour éviter un bug
*/
function attendEnvoie() {
setTimeout(testProgress,5);
}
/*
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","upload_inc/progress.xhr.php?progress_key="+idProgress,true);
/* xhr.send(null); */
}
/*
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;*/
var current = parseInt(objRep.current,10);
var total = parseInt(objRep.total,10);
var pourcent = ((current/total)*100).toFixed(0); // Arrondi à l'entier
var conteneur = document.getElementById("progress_conteneur");
var barre = document.getElementById("progress_barre");
var txt = document.getElementById("progress_texte");
// Affichage au choix...
//txt.innerHTML = current+' / '+total;
txt.innerHTML = pourcent+' %';
// Positionnement du texte
txt.style.left = ((parseInt(conteneur.style.width,10)-txt.offsetWidth)/2)+'px';
txt.style.top = ((parseInt(conteneur.style.height,10)-txt.offsetHeight)/2)+'px';
// Taille de la barre
barre.style.width = (pourcent/100)*parseInt(conteneur.style.width,10)+'px';
//tant que l'upload est en cours le serveur est réinterrogé
if (objRep.done==0) { testProgress(); }
} |
Qui très honètement est vraiment un peut du petit chinois pour moi à part quelques base que j'ai capté.
et voila le fichier "progress.xhr.php" qui est appelé dans le Javascript.
Code:
1
2
3
4
5
6
7
8
9
|
<?php
header('Content-type: text/plain; charset=UTF-8'); /* iso-8859-1 */
if (isset($_GET['progress_key'])) {
$rep=apc_fetch('upload_'.$_GET['progress_key']);
echo json_encode($rep);
exit;
}
?> |
Donc sous FF j'ai bien la barre qui devient rouge et qui affiche le % de l'upload réalisé mais pas sur IE n'y Chrome.
D'ou en désespoirs de cause j'avais préparé un petit GIF qui aurai simulé la progression mais la encore impossible de faire le javascript qui me permette d'affiché cette image entre les balises <div id="barre_progress"></div> une fois le formulaire posté.
Alors si quelqu'un peut me venir en aide et m'expliquer un peut le problème je serais comblé en attendant que je progresse dans ce langage.
Merci à vous.
