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> |
Partager