Hello all.
I am basically taking the code from http://progphp.com/progress.phps :: http://goto.inethdd.com/176119517 and trying to implement it on my site.
My problem is that the dialog box will not disappear or reach 100%.
I upload a file, the progress bar shows ... It gets to 99% then stops. I refresh the page and my file did in fact upload and move to the proper directory as per my script.
Here is the link to a page you can demo to see what I mean: http://www.inethdd.com/upload.php
Here is the code I am using:
upload.tpl
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<base href="http://www.inethdd.com" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="styles/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/yui/build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="/yui/build/event/event.js"></script>
<script type="text/javascript" src="/yui/build/dom/dom.js"></script>
<script type="text/javascript" src="/yui/build/animation/animation.js"></script>
<script type="text/javascript" src="/yui/build/dragdrop/dragdrop.js"></script>
<script type="text/javascript" src="/yui/build/connection/connection.js"></script>
<script type="text/javascript" src="/yui/build/container/container.js"></script>
<link rel="stylesheet" type="text/css" href="/yui/build/container/assets/container.css" />
<script type="text/javascript">
var fN = function callBack(o) {
var resp = eval('(' + o.responseText + ')');
var rate = parseInt(resp['rate']/1024);
if(resp['cancel_upload']) {
txt="Cancelled after "+resp['current']+" bytes!";
} else {
txt=resp['total']+" bytes uploaded!";
}
txt += "<br>Upload rate was "+rate+" kbps.";
document.getElementById('pbar').style.width = '100%';
document.getElementById('ppct').innerHTML = "100%";
document.getElementById('ptxt').innerHTML = txt;
setTimeout("progress_win.hide(); window.location.reload(true);",2000);
}
var callback = { upload:fN }
var fP = function callBack(o) {
var resp = eval('(' + o.responseText + ')');
if(!resp['done']) {
if(resp['total']) {
var pct = parseInt(100*(resp['current']/resp['total']));
document.getElementById('pbar').style.width = ''+pct+'%';
document.getElementById('ppct').innerHTML = " "+pct+"%";
document.getElementById('ptxt').innerHTML = resp['current']+" of "+resp['total']+" bytes";
}
setTimeout("update_progress()",500);
} else if(resp['cancel_upload']) {
txt="Cancelled after "+resp['current']+" bytes!";
document.getElementById('ptxt').innerHTML = txt;
setTimeout("progress_win.hide(); window.location.reload(true);",2000);
}
}
var progress_callback = { success:fP }
function update_progress() {
progress_key = document.getElementById('progress_key').value;
YAHOO.util.Connect.asyncRequest('GET','progress.php?progress_key='+progress_key, progress_callback);
}
var progress_win;
function postForm(target,formName) {
YAHOO.util.Connect.setForm(formName,true);
YAHOO.util.Connect.asyncRequest('POST',target,callback);
/* Is there some event that triggers on an aborted file upload? */
/* YAHOO.util.Event.addListener(window, "abort", function () { alert('abort') } ); */
progress_win = new YAHOO.widget.Panel("progress_win", { width:"420px", fixedcenter:false, underlay:"shadow", close:false, draggable:true, modal:true, effect:{effect:YAHOO.widget.ContainerEffect.FADE, duration:0.3} } );
progress_win.setHeader("Uploading "+document.getElementById('upload1').value+" ...");
progress_win.setBody('<div style="height: 1em; width: 400px; border:1px solid #000;"> <div id="pbar" style="background: #99e; height: 98%; width:0%; float:left;"> </div> <div id="ppct" style="height: 90%; position: absolute; margin: 1 0 0 185;">0%</div></div><div id="ptxt" style="margin: 3 0 0 5">0 of 0 bytes</div>');
progress_win.render(document.body);
update_progress();
}
</script>
<title>iNetHDD</title>
</head>
<body>
<{include file="headerSection.inc.tpl"}>
<div id="bodyContent">
<form enctype="multipart/form-data" id="upload_form" action="" onsubmit="postForm('upload.php','upload_form'); return false;" method="post">
<input type="hidden" name="MAX_FILE_FIZE" value="<{$max_file_size}>" />
<input type="hidden" name="APC_UPLOAD_PROGRESS" id="progress_key" value="<{$uniqueID}>"/>
<table width="50%" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3">You have a maximum file upload size of <{if $userID == 0}>100MB<{else}>1000MB<{/if}>.</td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td>Choose file to upload:</td>
<td><input type="file" name="upload1" id="upload1" /></td>
<td><input type="submit" value=" Submit " name="submitUpload" /></td>
</tr>
</table>
<div id="progress_win">
<div class="hd" style="color: #222; background: #bbb"></div>
<div class="bd"></div>
<div class="ft"></div>
</div>
</form>
</div>
</body>
</html>
progress.php
<?php
if($_SERVER['REQUEST_METHOD']=='POST') {
$status = apc_fetch('upload_'.$_POST['APC_UPLOAD_PROGRESS']);
$status['done']=1;
echo json_encode($status);
exit;
} else if(isset($_GET['progress_key'])) {
$status = apc_fetch('upload_'.$_GET['progress_key']);
echo json_encode($status);
exit;
}
?>
The contents of upload.php, which calls upload.tpl, should be irrelevant.
Thanks for anyone's advice!
