I am not sure if i am going the right way with this, as I have to admit I do not understand some of the variables of the preogress.php completly. Nevertheless I wrote an ajaxed version of the upload script with the help of sarissa.js [http://sarissa.sourceforge.net/].
My progress_ajax.php
<?
function UpDate(total,start_time,sid){
var xmlhttp = new XMLHttpRequest();
xmlhttp.open('POST', 'progress_ajax.php', true);
string ='total_size='+total+'&start_time='+start_time+'&sessionid='+sid;//+'&dtstart='+start_time+'&dtnow='+start_time;
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState==4){
var data = xmlhttp.responseXML;
var percents = data.getElementsByTagName('percent');
var percent = percents[0].firstChild.nodeValue;
var total_sizes = data.getElementsByTagName('total_size');
var iTotal = total_sizes[0].firstChild.nodeValue;
var start_times = data.getElementsByTagName('start_time');
var start_time = start_times[0].firstChild.nodeValue;
var sessionids = data.getElementsByTagName('sessionid');
var sessionid = sessionids[0].firstChild.nodeValue;
var current_sizes = data.getElementsByTagName('current_size');
var current_size = current_sizes[0].firstChild.nodeValue;
var speeds = data.getElementsByTagName('speed');
var speed = speeds[0].firstChild.nodeValue;
var time_elapseds = data.getElementsByTagName('time_elapsed');
var time_elapsed = time_elapseds[0].firstChild.nodeValue;
var time_remainings = data.getElementsByTagName('time_remaining');
var time_remaining = time_remainings[0].firstChild.nodeValue;
</form>
</body>
</html>
I guess it was just a matter of time until someone posted something like this. I still have a problem displaying the correct upload speed but will leave this for another time.
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
I am not sure if i am going the right way with this, as I have to admit I do not understand some of the variables of the preogress.php completly. Nevertheless I wrote an ajaxed version of the upload script with the help of sarissa.js [http://sarissa.sourceforge.net/].
My progress_ajax.php
<?
$info_file = "/tmp/".$_POST['sessionid']."_flength";
$data_file = "/tmp/".$_POST['sessionid']."_postdata";
function hms($sec) {
$thetime = str_pad(intval(intval($sec) / 3600),2,"0",STR_PAD_LEFT).":". str_pad(intval(($sec / 60) % 60),2,"0",STR_PAD_LEFT).":". str_pad(intval($sec % 60),2,"0",STR_PAD_LEFT) ;
return $thetime;
}
$started = TRUE;
$total_size = $_POST['total_size'];
$start_time = $_POST['start_time'];
$time_now = time();
$sessionid = $_POST['sessionid'];
if ($total_size == 0) {
if ($fp = @fopen($info_file,"r")) {
$fd = fread($fp,1000);
fclose($fp);
$total_size = $fd;
} else {
$started = FALSE;
}
}
if ($started == TRUE) {
if ($start_time == 0) {
$start_time = $time_now;
}
$time_elapsed = $time_now - $start_time;
if ($time_elapsed == 0) {
$time_elapsed = 1;
}
$current_size = @filesize($data_file);
$percent_done = sprintf("%.0f",($current_size / $total_size) * 100);
$speed = ($current_size / $time_elapsed);
if ($speed == 0) {
$speed = 1024;
}
$time_remain_str = hms(($total_size-$current_size) / $speed);
$time_elapsed_str = hms($time_elapsed);
}
header('Content-type: text/xml');
print '<content>';
if ($percent_done < 100) {
print '<total_size>'.$total_size.'</total_size>';
print '<start_time>'.$start_time.'</start_time>';
print '<sessionid>'.$sessionid.'</sessionid>';
}
if ($started) {
if(!$current_size){
$current_size=0;
}
print '<percent>'.$percent_done.'</percent>';
print '<current_size> '.$current_size.'</current_size>';
print '<speed>'.printf("%.2f",$speed).'</speed>';
print '<time_elapsed>'.$time_elapsed_str.'</time_elapsed>';
print '<time_remaining>'.$time_remain_str.'</time_remaining>';
} else {
print '<percent>0</percent>';
print '<current_size>0</current_size>';
print '<speed>0</speed>';
print '<time_elapsed>0</time_elapsed>';
print '<time_remaining>0</time_remaining>';
}
print '</content>';
?>
My upload_ajax.php
<?
$sid = md5(uniqid(rand()));
$dtstart = time();
$dtnow = $dtstart;
?>
<html>
<script type="text/javascript" src="sarissa.js"></script>
<script language="javascript" type="text/javascript">
function UpDate(total,start_time,sid){
var xmlhttp = new XMLHttpRequest();
xmlhttp.open('POST', 'progress_ajax.php', true);
string ='total_size='+total+'&start_time='+start_time+'&sessionid='+sid;//+'&dtstart='+start_time+'&dtnow='+start_time;
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState==4){
var data = xmlhttp.responseXML;
var percents = data.getElementsByTagName('percent');
var percent = percents[0].firstChild.nodeValue;
var total_sizes = data.getElementsByTagName('total_size');
var iTotal = total_sizes[0].firstChild.nodeValue;
var start_times = data.getElementsByTagName('start_time');
var start_time = start_times[0].firstChild.nodeValue;
var sessionids = data.getElementsByTagName('sessionid');
var sessionid = sessionids[0].firstChild.nodeValue;
var current_sizes = data.getElementsByTagName('current_size');
var current_size = current_sizes[0].firstChild.nodeValue;
var speeds = data.getElementsByTagName('speed');
var speed = speeds[0].firstChild.nodeValue;
var time_elapseds = data.getElementsByTagName('time_elapsed');
var time_elapsed = time_elapseds[0].firstChild.nodeValue;
var time_remainings = data.getElementsByTagName('time_remaining');
var time_remaining = time_remainings[0].firstChild.nodeValue;
var status=percent+"%<br/>";
status+=current_size+"/"+iTotal+" kb<br/>";
status+="@"+speed+" kbit/s<br/>";
status+="Time Remaining: "+time_remaining+"<br/>";
document.getElementById('progress_bar').innerHTML=status;
setTimeout("UpDate('"+iTotal+"','"+start_time+"','"+sid+"')",1000)
}
}
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlhttp.send(string);
}
function startIt() {
document.forms[0].submit();
sid = document.forms[0].sessionid.value;
iTotal = escape("0");
UpDate(iTotal,<?PHP echo $dtstart; ?>,sid);
}
</script>
<body>
<div id="progress_bar"></div>
<form enctype="multipart/form-data" action="/cgi-bin/uploadnew.cgi?sid=<? echo $sid; ?>" method="post">
<table border=0 align="left" cellpadding=3>
<tr>
<td><input type="file" name="file[0]"></td>
</tr>
<tr>
<td colspan=2 align="center"> <input type="hidden" name="sessionid" value="<?= $sid ?>">
<input type="button" value="Send" onClick="startIt();">
</td>
</tr>
</table>
</form>
</body>
</html>
I guess it was just a matter of time until someone posted something like this. I still have a problem displaying the correct upload speed but will leave this for another time.