After the form submits, the progressbar appears, and the getProgress function is called. getProgress check a php file (which uses the uploadprogress apache mod to get the current upload progress) and returns a number from 0 to 100 (which means complete).
OK, The idea is that getProgress is self-executed if the number returned is not 100. Otherwise, the form continues to upload.php where the file is manipulated.
THIS IS WHAT IM LOOKING FOR: http://screenr.com/ByG <- video.
Here is the HTML part.
<form method="post" action="upload.php" enctype="multipart/form-data" id="UploadForm">
<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 id="UploadBarContainer">
<div id="LoadBar"></div>
<div id="ProgressBar"></div>
</div>
Here is the jQuery part. Which seems to be broken
$(function(){
// This flag determines if the upload has started
var started = false;
// Start progress tracking when the form is submitted
$('#UploadForm').submit(function() {
//Update the flag to true.
started = true;
//Hide the form.
$('#UploadForm').hide();
//Show the progress bar.
$('#UploadBarContainer, #LoadBar, #ProgressBar').show();
//Start updating progress after a 2 second delay.
//This is to prevent the getprogress.php assume that upload is complete.
setTimeout(function () {
// We pass the upload identifier to our function
getProgress($('#uid').val());
}, 2000);
});
//Function used to get the current upload progress.
//It should be executed over and over again untill the result is 100.
function getProgress(id) {
//Get the current time.
var time = new Date().getTime();
//Make an ajax request to the server.
$.ajax({
//Pass the data trought GET method.
type: 'GET',
//Get the progress from this php file.
url: 'getprogress.php',
//Pass our upload identifier as a parameter and current time to prevent caching.
data: { uid: id, t: time },
//Get the results.
success: function (data) {
//Get the output as an integer.
var progress = parseInt(data, 10);
//If upload progress is not 100, change bar percentage and update again.
if (progress < 100) {
//Update the progress bar percentage.
//But only if we have started.
$('#ProgressBar').css('width', progress + '%');
//If we aren't done, update again.
getProgress(id);
}
}
});
}
});
Just i case this helps, here is the getprogress.php file called on the $.ajax request.
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);
}
else {
// If there is no data, assume it's done
echo 100;
}
}
Any help is appreciated, i have a live demo but i scared about what you could upload.
