ygtx
/
ygtx_oa


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
							<?php
	header("Cache-Control: no-cache, must-revalidate");
	header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");

	if (@$_GET['id']) {
		echo json_encode(uploadprogress_get_info($_GET['id']));
		exit();
	}
	
	$uuid = uniqid();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<title>jQuery Progress Bar v1.1</title>
		<link rel='stylesheet' href='http://t.wits.sg/misc/css/form.css' type='text/css' />
		<link rel='stylesheet' href='http://t.wits.sg/misc/css/demo.css' type='text/css' />
		<script type="text/javascript" src="http://t.wits.sg/misc/js/jQuery/jquery.js"></script>
		<script type="text/javascript" src="http://t.wits.sg/misc/js/jQuery/chili/jquery.chili-2.2.js"></script>
		<script type="text/javascript"> 
			ChiliBook.recipeFolder = "../js/jQuery/chili/";  
		</script>
		<script type="text/javascript" src="js/jquery.progressbar.min.js"></script>
		<script>
			var progress_key = '<?= $uuid ?>';

			$(document).ready(function() {
				$("#spaceused1").progressBar();
				$("#spaceused2").progressBar({ barImage: 'images/progressbg_yellow.gif'} );
				$("#spaceused3").progressBar({ barImage: 'images/progressbg_orange.gif', showText: false} );
				$("#spaceused4").progressBar(65, { showText: false, barImage: 'images/progressbg_red.gif'} );
				$("#uploadprogressbar").progressBar();
			});

			function beginUpload() {
				$("#uploadprogressbar").fadeIn();
				setTimeout("showUpload()", 1500);
			}

			function showUpload() {
				$.get("demo.php?id=" + progress_key, function(data) {
					if (!data)
						return;

					var response;
					eval ("response = " + data);

					if (!response)
						return;

					var percentage = Math.floor(100 * parseInt(response['bytes_uploaded']) / parseInt(response['bytes_total']));
					$("#uploadprogressbar").progressBar(percentage);

				});
				setTimeout("showUpload()", 750);

			}
		</script>
		<style>
			table tr { vertical-align: top; }
			table td { padding: 3px; }
			div.contentblock { padding-bottom: 25px; }	
			#uploadprogressbar { display: none; }
		</style>
	</head>
	<body>
		<div id="container">
			<div style="float: right; text-align: right; width: 300px;">download me at <a href="http://t.wits.sg">http://t.wits.sg</a></div>
			<div class="contentblock">
				<h2>Progress Bars &amp; Controls</h2>
				<table>
					<tr><td>Default Multicolored Bar</td><td><span class="progressBar" id="spaceused1">75%</span></td></tr>
					<tr><td>Yellow Bar</td><td><span class="progressBar" id="spaceused2">35%</span></td></tr>
					<tr><td>Orange Bar (No Text)</td><td><span class="progressBar" id="spaceused3">55%</span></td></tr>
					<tr><td>Red Bar (No Text)</td><td><span class="progressBar" id="spaceused4">85%</span></td></tr>
				</table>
				<strong>Some controls: </strong>
				<a href="#" onclick="$('#spaceused1').progressBar(20);">20</a> |
				<a href="#" onclick="$('#spaceused1').progressBar(40);">40</a> |
				<a href="#" onclick="$('#spaceused1').progressBar(60);">60</a> |
				<a href="#" onclick="$('#spaceused1').progressBar(80);">80</a> |
				<a href="#" onclick="$('#spaceused1').progressBar(100);">100</a>
			</div>

			<div class="contentblock">
				<h2>Usage: </h2>
<pre class="ln-"><code class="js">
$(document).ready(function() {
	$("#spaceused1").progressBar();
	$("#spaceused2").progressBar({ barImage: 'images/progressbg_yellow.gif'} );
	$("#spaceused3").progressBar({ barImage: 'images/progressbg_orange.gif', showText: false} );
	$("#spaceused4").progressBar(65, { showText: false, barImage: 'images/progressbg_red.gif'} );
	$("#uploadprogressbar").progressBar();
});
</code></pre>
			
			</div>
			<div class="contentblock">
				<h2>Progress Bars Form Example</h2>
				<a href="demo.txt">Download the PHP Source here</a>
				<form action="" method="POST" id="uploadform" enctype="multipart/form-data" onsubmit="beginUpload();">
					<input type="hidden" name="UPLOAD_IDENTIFIER" id="progress_key" value="<?= $uuid ?>" />
					<table class="form">
						<tr><td class="labelcol"><label for="firstname">First Name</label><em>*</em></td><td class="inpulcol"><input type="text" name="firstname" id="firstname" class="text" /></tr>
						<tr><td class="labelcol"><label for="lastname">First Name</label><em>*</em></td><td class="inpulcol"><input type="text" name="lastname" id="lastname" class="text" /></tr>
						<tr><td class="labelcol"><label for="password">First Name</label><em>*</em></td><td class="inpulcol"><input type="password" name="password" id="password" class="text" /></tr>
						<tr><td class="labelcol"><label for="ulfile1">File 1</label></td>
						    <td><input type="file" name="ulfile1" id="ulfile1" /></td>
						</tr>
						<tr><td class="labelcol"><label for="ulfile2">File 2</label></td>
						    <td><input type="file" name="ulfile2" id="ulfile2" /></td>
						</tr>
						<tr><td class="labelcol"><label for="ulfile3">File 3</label></td>
						    <td><input type="file" name="ulfile3" id="ulfile3" /></td>
						</tr>
						<tr><td class="labelcol"></td>
							<td class="inputcol"><input type="submit" value="Submit" />
							<br />
							<span class="progressbar" id="uploadprogressbar">0%</span>	
						</td></tr>
					</table>
				</form>
			</div>
			
			<div class="contentblock">
				<h2>Upload Form Javascript: </h2>
<pre class="ln-"><code class="js">
var progress_key = '<?= $uuid ?>';

// this sets up the progress bar
$(document).ready(function() {
	$("#uploadprogressbar").progressBar();
});

// fades in the progress bar and starts polling the upload progress after 1.5seconds
function beginUpload() {
	$("#uploadprogressbar").fadeIn();
	setTimeout("showUpload()", 1500);
}

// uses ajax to poll the uploadprogress.php page with the id
// deserializes the json string, and computes the percentage (integer)
// update the jQuery progress bar
// sets a timer for the next poll in 750ms
function showUpload() {
	$.get("demo.php?id=" + progress_key, function(data) {
		if (!data)
			return;

		var response;
		eval ("response = " + data);

		if (!response)
			return;

		var percentage = Math.floor(100 * parseInt(response['bytes_uploaded']) / parseInt(response['bytes_total']));
		$("#uploadprogressbar").progressBar(percentage);

	});
	setTimeout("showUpload()", 750);

}
</code></pre>
			</div>
		</div>
	</body>
</html>