php - 使用 php 和 jquery 上传进度条

Question

所以我尝试使用进度条进行上传，我安装了 uploadprogress pecl，如果表单中的操作导致 upload.php，任何其他名称，上传工作完美停止工作。

如果名称不是 upload.php 输出只是“100”(这可以在下面的 getprogress.php 文件中看出) 这是形式:(这个版本有效，因为文件是 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>

这是 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>

这是文件 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;
   }
}
?>

我为此花了大约 5 个小时试图找出原因，但我做不到。帮助将不胜感激。

Answer 1

你可以在不使用 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 />';

?>

可以在while进程中调用setProgressBarProgress函数，看你的需要!!!太棒了!