dweb Posted August 14, 2012 Share Posted 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> Quote Link to comment https://forums.phpfreaks.com/topic/267078-upload-bar-returns-null/ Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.