Zend FR

tsabes · 09-11-2009 23:06:52

Salut,

Je suis face a un probleme ...

J'essai de mettre en place une barre de progression pour l'envoi d'une image, en respectant le modele Mvc.

J'ai essayer de reprendre une parti du code des demos fournis avec zend, et je suis allez voir la doc, fait le tour de google, mais je trouve pas de tuto ou autre chose a ce sujet c'est vraiment dommage

Je vous met le code si desous

Le formulaire

Code:

        <form onsubmit="observeProgress()" target="uploadTarget" enctype="multipart/form-data" action="monurl" method="post">

    
.......
                <div class="label"><label for="img">Image : </label></div>
                
                <input type="hidden" name="UPLOAD_IDENTIFIER" id="uploadId" value="<?php echo md5(uniqid(rand())); ?>" />
                <div class="element"><?php  echo $this->form->img; ?></div>
.......
        
        </form>        

    <iframe name="uploadTarget"></iframe>

    <div id="progressbar">
        <div class="pg-progressbar">
            <div class="pg-progress" id="pg-percent">
                <div class="pg-progressstyle"></div>
                <div class="pg-invertedtext" id="pg-text-1"></div>
            </div>
            <div class="pg-text" id="pg-text-2"></div>
        </div>
    </div>
    <div id="progressBar"><div id="progressDone"></div></div>

Le js chargé dans la page:

Code:

    <script type="text/javascript">
        function makeRequest(url)
        {
            var httpRequest;
        
            if (window.XMLHttpRequest) {
                httpRequest = new XMLHttpRequest();
                if (httpRequest.overrideMimeType) {
                    httpRequest.overrideMimeType('text/xml');
                }
            } else if (window.ActiveXObject) {
                try {
                    httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
                } catch (e) {
                    try {
                        httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
                    } catch (e) {}
                }
            }
        
            if (!httpRequest) {
                alert('Giving up :( Cannot create an XMLHTTP instance');
                return false;
            }
            
            httpRequest.onreadystatechange = function() { evalProgress(httpRequest); };
            httpRequest.open('GET', url, true);
            httpRequest.send('');
        
        }
    
        function observeProgress()
        {
            setTimeout("getProgress()", 200);
        }
        
        function getProgress()
        {
            makeRequest('moncontroller/monaction/uploadId/' + $('#uploadId').val());
        }

        function evalProgress(httpRequest)
        {
            try {
                if (httpRequest.readyState == 4) {
                    if (httpRequest.status == 200) {
                        eval('var data = ' + httpRequest.responseText);

                        if (data.finished) {
                            finish();
                        } else {
                            update(data);
                            setTimeout("getProgress()", 1000);
                        }
                    } else {
                        alert('There was a problem with the request.');
                    }
                }
            } catch(e) {
                alert('Caught Exception: ' + e.description);
            }
        }
        
        function update(data)
        {
            document.getElementById('pg-percent').style.width = data.percent + '%';

            document.getElementById('pg-text-1').innerHTML = data.timeRemaining + ' seconds remaining';
            document.getElementById('pg-text-2').innerHTML = data.timeRemaining + ' seconds remaining';
        }
        
        function finish()
        {
            document.getElementById('pg-percent').style.width = '100%';
        
            document.getElementById('pg-text-1').innerHTML = 'Upload done';
            document.getElementById('pg-text-2').innerHTML = 'Upload done';
        }
    </script>

La fonction appeller pour choper les données transferé:

Code:

    public function monactionAction(){
    
    $data          = apc_cache_info($this->_getParam('uploadId'));   
    $bytesTotal    = ($data === null ? 0 : $data['bytes_total']);
    $bytesUploaded = ($data === null ? 0 : $data['bytes_uploaded']);
    
    $adapter     = new Zend_ProgressBar_Adapter_JsPull();
    $progressBar = new Zend_ProgressBar($adapter, 0, $bytesTotal, 'uploadProgress');
    
    if ($bytesTotal === $bytesUploaded) {
        $progressBar->update($bytesUploaded);
    } else {
        $progressBar->update($bytesUploaded);
    }

        $this->_helper->layout->disableLayout();
        $this->getHelper('viewRenderer')->setNoRender();
    }

Vila je pense avoir tous mis, j'ai bien sur Apc d'activé sur le serveur, mais des que j'essai l'image ce transfert bien mais il me met directement "upload done" alors qu'il lest encore en train de l'envoyer..

Je vois pas d'ou ca peu venir , je suis toujours pas arrivé a avoir un autre message que celui ci

Merci pour votre aide

Zend FR

#1 09-11-2009 23:06:52

Zend_Progressbar, fonctionnement mvc

Code:

Code:

Code:

Pied de page des forums