php - con - barra de progreso jquery ajax
Subir la barra de progreso usando php y jquery (1)
Así que estoy tratando de tener una carga con una barra de progreso, instalé uploadprogress pecl, y la carga funcionó perfectamente si la acción en el formulario lleva a upload.php , a cualquier otro nombre, y deja de funcionar.
Si el nombre no es upload.php el resultado es simplemente "100" (que se puede ver por qué a continuación con el archivo getprogress.php) esta es la forma: (esta versión funciona, ya que el archivo es 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>
este es el 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>
este es el archivo 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;
}
}
?>
He pasado aproximadamente 5 horas tratando de descubrir por qué, y no puedo. La ayuda sería muy apreciada.
Puedes usar esta clase, sin usar 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…<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 />'';
?>