Upload progress bar using php and jquery

Question

So im trying to have an upload with a progress bar, i installed uploadprogress pecl, and the upload worked perfectly if the action in the form leads to upload.php, any other name, and it stops working.

If the name is not upload.php the output is simply "100" (which can be seen why below with the getprogress.php file) this is the form: (this versions works, as the file is upload.php)

<form method="post" action="/test/upload.php" enctype="multipart/form-data" id="upload-form" target="upload-frame">
        <input type="hidden" id="uid" name="UPLOAD_IDENTIFIER" value="<?php echo $uid; ?>">
        <input type="file" name="file">
        <input type="submit" name="submit" value="Upload!">
    </form>
    </div>
    <div style="float:left;width:100%;">
    <div id="progress-bar"></div>
    </div>
    <iframe id="upload-frame" name="upload-frame"></iframe>

this is the jquery:

<script>
        (function ($) {
            var pbar;
            var started = false; 
            $(function () {
                $('#upload-form').submit(function() {
                    pbar = $('#progress-bar');
                    pbar.show().progressbar();
                    $('#upload-frame').load(function () {
                        started = true;
                    });
                    setTimeout(function () {
                        updateProgress($('#uid').val());
                    }, 1000);
                });
            });
            function updateProgress(id) {
                var time = new Date().getTime();
                $.get('../uploadprogress/getprogress.php', { uid: id, t: time }, function (data) {
                    var progress = parseInt(data, 10);
                    if (progress < 100 || !started) {
                        started = progress < 100;
                        updateProgress(id);
                    }
                    started && pbar.progressbar('value', progress);
                });
            }
        }(jQuery));
</script>

this is the file getprogress.php

<?php
if (isset($_GET['uid'])) {
   // Fetch the upload progress data
   $status = uploadprogress_get_info($_GET['uid']);
   if ($status) {
       // Calculate the current percentage
       echo round($status['bytes_uploaded']/$status['bytes_total']*100, 1);
   }
   else {
       // If there is no data, assume it's done
       echo 100;
   }
}
?>

ive spent about 5 hours on this trying to figure out why, and i cant. help would be greatly appreciated.

Answer 1

You can use this class, without using jquery:

<?php

/**
 * Progress bar for a lengthy PHP process
 * http://spidgorny.blogspot.com/2012/02/progress-bar-for-lengthy-php-process.html
 */

class ProgressBar {
    var $percentDone = 0;
    var $pbid;
    var $pbarid;
    var $tbarid;
    var $textid;
    var $decimals = 1;

    function __construct($percentDone = 0) {
        $this->pbid = 'pb';
        $this->pbarid = 'progress-bar';
        $this->tbarid = 'transparent-bar';
        $this->textid = 'pb_text';
        $this->percentDone = $percentDone;
    }

    function render() {
        //print ($GLOBALS['CONTENT']);
        //$GLOBALS['CONTENT'] = '';
        print($this->getContent());
        $this->flush();
        //$this->setProgressBarProgress(0);
    }

    function getContent() {
        $this->percentDone = floatval($this->percentDone);
        $percentDone = number_format($this->percentDone, $this->decimals, '.', '') .'%';
        $content .= '<div id="'.$this->pbid.'" class="pb_container">
            <div id="'.$this->textid.'" class="'.$this->textid.'">'.$percentDone.'</div>
            <div class="pb_bar">
                <div id="'.$this->pbarid.'" class="pb_before"
                style="width: '.$percentDone.';"></div>
                <div id="'.$this->tbarid.'" class="pb_after"></div>
            </div>
            <br style="height: 1px; font-size: 1px;"/>
        </div>
        <style>
            .pb_container {
                position: relative;
            }
            .pb_bar {
                width: 100%;
                height: 1.3em;
                border: 1px solid silver;
                -moz-border-radius-topleft: 5px;
                -moz-border-radius-topright: 5px;
                -moz-border-radius-bottomleft: 5px;
                -moz-border-radius-bottomright: 5px;
                -webkit-border-top-left-radius: 5px;
                -webkit-border-top-right-radius: 5px;
                -webkit-border-bottom-left-radius: 5px;
                -webkit-border-bottom-right-radius: 5px;
            }
            .pb_before {
                float: left;
                height: 1.3em;
                background-color: #43b6df;
                -moz-border-radius-topleft: 5px;
                -moz-border-radius-bottomleft: 5px;
                -webkit-border-top-left-radius: 5px;
                -webkit-border-bottom-left-radius: 5px;
            }
            .pb_after {
                float: left;
                background-color: #FEFEFE;
                -moz-border-radius-topright: 5px;
                -moz-border-radius-bottomright: 5px;
                -webkit-border-top-right-radius: 5px;
                -webkit-border-bottom-right-radius: 5px;
            }
            .pb_text {
                padding-top: 0.1em;
                position: absolute;
                left: 48%;
            }
        </style>'."\r\n";
        return $content;
    }

    function setProgressBarProgress($percentDone, $text = '') {
        $this->percentDone = $percentDone;
        $text = $text ? $text : number_format($this->percentDone, $this->decimals, '.', '').'%';
        print('
        <script type="text/javascript">
        if (document.getElementById("'.$this->pbarid.'")) {
            document.getElementById("'.$this->pbarid.'").style.width = "'.$percentDone.'%";');
        if ($percentDone == 100) {
            print('document.getElementById("'.$this->pbid.'").style.display = "none";');
        } else {
            print('document.getElementById("'.$this->tbarid.'").style.width = "'.(100-$percentDone).'%";');
        }
        if ($text) {
            print('document.getElementById("'.$this->textid.'").innerHTML = "'.htmlspecialchars($text).'";');
        }
        print('}</script>'."\n");
        $this->flush();
    }

    function flush() {
        print str_pad('', intval(ini_get('output_buffering')))."\n";
        //ob_end_flush();
        flush();
    }

}

echo 'Starting&hellip;<br />';

$p = new ProgressBar();
echo '<div style="width: 300px;">';
$p->render();
echo '</div>';
for ($i = 0; $i < ($size = 100); $i++) {
    $p->setProgressBarProgress($i*100/$size);
    usleep(1000000*0.1);
}
$p->setProgressBarProgress(100);

echo 'Done.<br />';

?>

You can call the setProgressBarProgress function inside a while process, depending on your needs!!! It's great!.