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.

So if you rename the file upload.php and the upload.php value in the form, it doesn't work at all? — Jack
– Jack, Commented Apr 18, 2012 at 2:20
no, simply, if the name in the form is for example uploading.php, the output from getprogress.php is always 100. if it is upload.php, the output is an actual uploaded % value. — JimmyBanks
– JimmyBanks, Commented Apr 18, 2012 at 2:22
But you actually renamed the file from upload.php to uploading.php instead of just changing the form value only, right? — Jack
– Jack, Commented Apr 18, 2012 at 2:39
What are the values of $status['bytes_uploaded'] and $status['bytes_total'] during upload? I guess one (or both) of them is/are wrong? Which one? — Alfred Godoy
– Alfred Godoy, Commented Apr 19, 2012 at 1:24

Joel Hernandez · Accepted Answer · 2012-04-30 16:55:05Z

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 />';

?>

Collectives™ on Stack Overflow

Upload progress bar using php and jquery

1 Answer 1

You can use this class, without using jquery:

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

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

You can use this class, without using jquery:

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

Comments

Your Answer

Sign up or log in

Post as a guest

Related