Загрузить индикатор выполнения с помощью php и jquery

Итак, я пытаюсь выполнить загрузку с индикатором выполнения, я установил 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 часов на это, пытаясь понять, почему, и я не могу. Помощь будет принята с благодарностью.


php jquery pecl upload progress-bar
person JimmyBanks    schedule 18.04.2012    source источник
comment
Так что, если вы переименуете файл upload.php и значение upload.php в форме, это вообще не сработает?   -  person Jack    schedule 18.04.2012
comment
нет, просто, если имя в форме, например, uploading.php, вывод из getprogress.php всегда равен 100. если это upload.php, вывод представляет собой фактическое загруженное значение %.   -  person JimmyBanks    schedule 18.04.2012
comment
Но вы на самом деле переименовали файл с upload.php на uploading.php вместо того, чтобы просто изменить только значение формы, верно?   -  person Jack    schedule 18.04.2012
comment
Каковы значения $status['bytes_uploaded'] и $status['bytes_total'] во время загрузки? Я предполагаю, что один (или оба) из них неверны? Который из?   -  person Alfred Godoy    schedule 19.04.2012

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете использовать этот класс без использования 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 />';

?>

Вы можете вызвать функцию setProgressBarProgress внутри процесса while, в зависимости от ваших потребностей!!! Это великолепно!.

person Joel Hernandez    schedule 30.04.2012