Upload bar returns null

dweb · August 14, 2012

Hi everyone

I'm trying to get a file upload progress bar working, which uses APC and Query to check the size of the file during upload, but for some reason when uploading the file, the only values returned are coming back as 0

But it does upload the file ok, but the upload bar sits as 0 the whole time

Attached is a screenshot of firebug showing the responses as 0

The following code makes up the 2 files used, sorry for posting long code, but I know people will ask to see it

There is also a css file if anyone needs to see that

Any help would be great as it's driving me mad trying to find a solution

======================

upload.php

<?php 
//get unique id
$up_id = uniqid(); 
?>
<?php
//process the forms and upload the files
if ($_POST) {
//specify folder for file upload
$folder = "uploads/"; 
//specify redirect URL
$redirect = "upload.php?success";
//upload the file
move_uploaded_file($_FILES["file"]["tmp_name"], "$folder" . $_FILES["file"]["name"]);
//do whatever else needs to be done (insert information into database, etc...)
//redirect user
header('Location: '.$redirect); die;
}
?>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Upload your file</title>
<!--Progress Bar and iframe Styling-->
<link href="style_progress.css" rel="stylesheet" type="text/css" />
<!--Get jQuery-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.js" type="text/javascript"></script>
<!--display bar only if file is chosen-->
<script>
$(document).ready(function() { 
//
//show the progress bar only if a file field was clicked
var show_bar = 0;
    $('input[type="file"]').click(function(){
	show_bar = 1;
    });
//show iframe on form submit
    $("#form1").submit(function(){

	if (show_bar === 1) { 
		$('#upload_frame').show();
		function set () {
			$('#upload_frame').attr('src','upload_frame.php?up_id=<?php echo $up_id; ?>');
		}
		setTimeout(set);
	}
    });
//
});
</script>
</head>
<body>
<h1>Upload your file </h1>
<div>
  <?php if (isset($_GET['success'])) { ?>
    <span class="notice">Your file has been uploaded.</span>
    <?php } ?>
  <form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
    Name<br />
    <input name="name" type="text" id="name"/>
    <br />
    <br />
    Your email address <br />
    <input name="email" type="text" id="email" size="35" />
    <br />
    <br />
    Choose a file to upload<br />
    <!--APC hidden field-->
    <input type="hidden" name="APC_UPLOAD_PROGRESS" id="progress_key" value="<?php echo $up_id; ?>"/>
    <!---->
    <input name="file" type="file" id="file" size="30"/>
    <!--Include the iframe-->
    <br />
    <iframe id="upload_frame" name="upload_frame" frameborder="0" border="0" src="" scrolling="no" scrollbar="no" > </iframe>
    <br />
    <!---->
    <input name="Submit" type="submit" id="submit" value="Submit" />
  </form>
</div>
</body>
</html>

======================

upload_frame.php

<?php
$url = basename($_SERVER['SCRIPT_FILENAME']);
//Get file upload progress information.
if(isset($_GET['progress_key'])) {

$status = apc_fetch('upload_'.$_GET['progress_key']);
echo $status['current']/$status['total']*100;
die;
}
?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.js" type="text/javascript"></script>
<link href="style_progress.css" rel="stylesheet" type="text/css" />
<script>
$(document).ready(function() { 
//
setInterval(function() 
	{
$.get("<?php echo $url; ?>?progress_key=<?php echo $_GET['up_id']; ?>&randval="+ Math.random(), { 
	//get request to the current URL (upload_frame.php) which calls the code at the top of the page.  It checks the file's progress based on the file id "progress_key=" and returns the value with the function below:
},
	function(data)	//return information back from jQuery's get request
		{
			$('#progress_container').fadeIn(100);	//fade in progress bar	
			$('#progress_bar').width(data +"%");	//set width of progress bar based on the $status value (set at the top of this page)
			$('#progress_completed').html(parseInt(data) +"%");	//display the % completed within the progress bar
		}
	)},500);	//Interval is set at 500 milliseconds (the progress bar will refresh every .5 seconds)

});
</script>
<body style="margin:0px">
<!--Progress bar divs-->
<div id="progress_container">
  <div id="progress_bar">
    <div id="progress_completed"></div>
  </div>
</div>
<!---->
</body>

Sign In

Upload bar returns null

Recommended Posts

dweb

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information