使用PHP和jQuery上传进度条

5

我正在尝试实现带有进度条的上传功能,我安装了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个小时来尝试弄清楚为什么,但是我无法找到原因。非常希望能得到帮助。


那么,如果你将文件 upload.php 的名称以及表单中的 upload.php 值重命名,它就完全无法工作了吗? - Jack
如果表单中的名称例如为uploading.php,则从getprogress.php输出的结果始终为100。如果名称为upload.php,则输出为实际上传的百分比值。 - JimmyBanks
但是您实际上将文件从 upload.php 重命名为 uploading.php,而不仅仅是更改表单值,对吗? - Jack
上传过程中$status['bytes_uploaded']和$status['bytes_total']的值是多少?我猜其中一个(或两个)是错误的?哪一个是错的? - Alfred Godoy
1个回答

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 函数!这太棒了!


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接