Question

I’m currently working with progress bars for form uploads using the PHP uploadprogress extension. I have followed a tutorial here and everything works as in the example: http://www.ultramegatech.com/blog/2010/10/create-an-upload-progress-bar-with-php-and-jquery/

However in the example the form targets an iframe. My PHP script that receives the call checks the data and makes sure its all valid etc, if its successful it redirects, and if it fails it reloads the page with error highlighting.

Therefore… I was assuming if I took the…

target="upload-frame"

… away that the form would act as normal and do its thing, which it does.

However now that there is no target or iframe (and i did remove this from the javascript too) the javascript function which loops to update the progress bar doesn’t seem to get any data back from the getprogress() php function.

I can manually access it and information is there.

I assume that by default whilst form is being submitted that no other calls can be made on the page as the browser is effectively trying to redirect whilst waiting for files to upload. Does anyone know a way I can stall the redirect behaviour until file upload is complete?

Answer 1

The solution I have found is to continue using the iframe as a target for the form. Then when the upload completes I run a few checks on the iframe’s content.

First with jQuery I check the content of the #upload-frame to see if it contains either the redirect page or the same page with errors, like this:

$('#upload-frame').contents().find('.errors').size();

If the errors size is greater than 0 then I know a problem occurred and this needs to be shown to the user. So I do the following body replacement:

var html = $('#upload-frame').contents().find('body').html();
$('body').html(html);

If there are no errors I simply do a redirect to the intended page like so:

window.location = "finished.php";