begin process at 2012 05 29 00:33:29
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

Framework

 > 

Ajax

 > 

Barre de progression Javascript


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Barre de progression Javascript

mercredi 23 avril 2008 à 15:30:54 | Barre de progression Javascript

AurelR

Bonjour
Actuellement j'essaye d'envoyer un fichier sur mon serveur (sa j'y arrive) mais j'aimerais afficher une barre de progression.
En cherchant un peu j'ai trouvé quelque exemple je les ai testé mais j'ai des problemes.
Voici mon code html pour remplir le formulaire dans le fichier index.php:
<form enctype="multipart/form-data" action="index.php" method="post" onsubmit="submitForm();">
    <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 raction 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="aff">bienvenue</div>
    <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>

Ensuite dans le meme fichier j'ai ce morceau de javascript:
<script type="text/JavaScript">
   
    function submitForm() {
    setTimeout(envoie,30);//apres 30 seconde on arrete tout
    }

    function envoie()
    {
        var req = null;
        var idProgress=document.getElementById("progress_key").value;

        document.getElementById("aff").innerHTML="Started...";
        if(window.XMLHttpRequest)
            req = new XMLHttpRequest();
        else if (window.ActiveXObject)
            req  = new ActiveXObject(Microsoft.XMLHTTP);

        req.onreadystatechange = function()
        {
            document.getElementById("aff").innerHTML="Wait server...";
            if(req.readyState == 4)
            {
                if(req.status == 200)
                {
                    document.getElementById("aff").innerHTML="Received:" + req.responseText;
                    document.getElementById("enCours").innerHTML=req.current;
                    document.getElementById("total").innerHTML=req.total;
                    document.getElementById("tab").innerHTML=req;
                }   
                else   
                {
                    document.getElementById("aff").innerHTML="Error: returned status code " + req.status + " " + req.statusText;
                }   
            }
        };
        req.open("GET", "data.php?progress_key="+idProgress, true);
        req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        req.send(null);
    }
    </script>

Dans le fichier data.php:
<?php

if (isset($_GET['progress_key'])) {
    $rep=apc_fetch('upload_'.$_GET['progress_key']);
    echo "bien joué $rep";
}
?>

Le probleme c'est qu'il ne me renvoie rien dans mon rep.responseText alors j'aimerais savoir où sa cloche dans ce code. Merci.

mercredi 23 avril 2008 à 16:40:59 | Re : Barre de progression Javascript

bultez

Membre Club


Bonjour,

    lorsque que tu soumets ton formulaire, ça va l'envoyer et
       "remplacer" la page actuelle par la réponse de index.php.
       le setTimeout et le reste... n'est plus actif.


                Cordialement            Bul         [mon Site]     [M'écrire]
lundi 4 août 2008 à 13:37:58 | Re : Barre de progression Javascript

abdellahel



meci d'avance  je veut envoyer un champ file avec ajax
vous pouvait m'aider?

lundi 4 août 2008 à 14:14:10 | Re : Barre de progression Javascript

bultez

Membre Club

je veux.. je veux...   ebn, tu peux !
mais tant qu'à la gérer coté serveur, c'est une autre paire de maches !

             Cordialement            Bul           [mon Site]       [M'écrire]


Cette discussion est classée dans : req, document, getelementbyid, innerhtml, if


Répondre à ce message

Sujets en rapport avec ce message

Modif innerHTML d'un div entre 2 XMLHttpRequest synchrones sous IE [ par pacadebord ] Bonjour, Je suis en train de concevoir un outil qui, au clic sur un bouton, parcours les lignes d'un tableau, chaque ligne contenant 3 colonnes (pour Désactivé un bouton tant que la valeur du label = 0 [ par Madonnina78 ] Bonjour je suis débutante et j'aimerais que mon bouton/lien sois désactivé tant que la valeur de Video = 0 = 0 J'ai testé plusieurs choses je n'y ar probleme controle de saisie avec du javascript dans un formulaire html.php [ par suethi75 ] BonjourJe controle les champs obligatoires dans mon formulaire cependant cela ne marche pas.Voici mon code javascript: function verifForm(){  if (docu Comment puis-je améliorer ce script ??? [ par nanti ] Bonjour à tous !Tout d'abord, j'espère être dans le bon thème... !?Comme annoncer, je souhaite améliorer ces scripts pour n'en faire qu'un qui soit op Javascript ave Mozila [ par sdbounana ] Bonjour tous le monde, J'ai des problèmes avec la compatibilité de mon site avec les autres navigateurs: Il fonctionne uniquement en Internet Explorer remplissage div avec JS [ par themagician67 ] Bonjour, Je rencontre un problème avec un div. j'ai un tableau de la sorte : [code=html] pb de getElementById [ par kidpigeyre ] for(var i=0;i { document.getElementById("tete")[i].innerHTML=document.getElementById("tete")[i].innerHTML.substr(0,3); }voila ça ça ne ma obj.innerHTML [ par fgingat ] Bonjour à tous .. Voila mon premier poste concerne un soucis de comprehension de la methode de fonctionnement de obj.innerHTML  A savoir sur une page Problème avec la fonction switch [ par stiml ] Bonjour, Je sais qu'on a posté plusieurs questions sur ce sujet mais je n'est pas trouvée ma réponseMerci de m'éclairer sur cette fonction qui ne fonc couleur, radiobutton, onclick [ par gabs77 ] slt, j'ai un souci avec mon formulairej'ai un formulaire de base auquel j'ai des formulaires spécifiques par rapport a des choix effectuer dans ce for


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

Photothèque

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,094 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales