3

I am trying to make a 'simple" php+ajax script to show progress of multiple uploaded files. I have found on this website and on other pages, packages ready to use, etc.... I want to start from scratch for several reasons, and one of them is learning. Here is how I wanted to approach it: First, I start with a ajax code in upload.php (this file contains the upload form and a to display upload progress)

<script>
$(document).ready(function(){
 $("#uploadform").change(function(e) 
 {
    e.preventDefault();
    setInterval(function(){
$('div#upload_progress').load('upload_progress.php');
 }, 1000);
});
});
</script>

upload_progress.php contains the code to get the instant file size on the server (I have not got there yet). So, as for now, the only line I have in 'upload_progress.php' is: 'VOILA'. Here is my problem: the div #upload_progress does not load during the file uploaded, so I don't see the text in upload_progress.php. I have tried to upload large files or reduce the setInterval time, but without success. Except that when I put an alert window (alert('alertme');) after the setInterval, the div#upload_progress magically get loaded. I'd really appreciate some help.

JMarc
  • 984
  • 1
  • 13
  • 21
  • 1
    have you seen my implementation? http://stackoverflow.com/q/6913426/640030 – Andrea Sep 28 '11 at 15:33
  • 1
    +1 on doing something for the sake of learning. – Jonathan M Sep 28 '11 at 15:36
  • Andrea. I checked the link. I don't really understand the concept: how do you use $_SESSION to evaluate the progress (what makes $_SESSION['current'] value change?). Also, I am not sure how it will work for a multiple file upload: I'd need to create multiple sessions for each files? – JMarc Sep 28 '11 at 16:04
  • i have one session running for the whole site. holds things like login status. when you submit form, client side info is sent to server via `action` attrib. while that script is running (like when files are being uploaded) it's keeping track of status in session vars (i've done 1 file, i've done 2 files...). meanwhile, theres an ajax request to getProgress that contantly checks the session vars to calculate percent done – Andrea Sep 28 '11 at 16:10

2 Answers2

0

Try html5 

<progress value="1" max="100">Loading</progress>

And increase value

Maksym Prus
  • 101
  • 2
  • Actually, for that part, I was thinking of using 2 divs :
    . The width in % of div#scaled would change dynamically ($("#scaled").css('width',progress)) depending on the amount of the file that has been uploaded     – JMarc Sep 29 '11 at 16:41
0

U can use 2 divs like JMarc says..It's a little rusty and not very religious but it does the job.U retained the width in a session variable that holds the amount of file uploaded.

Bibu
  • 201
  • 3
  • 10
  • 25