在iframe中上传非阻止文件

Question

I have a button which when clicked opens up an overlay which is a form in an iframe. There is a file upload, I succeeded in making the overlay disappear and redirect the parent window to another page on submit. The problem is here:

If the user uploads a huge file the file has to be uploaded first before the user is redirected. Is there another way where the file is uploaded and at the same time the overlay is closed and the parent window redirected without loosing the file upload?

Kind Regards,

Answer 1

For me the solution is quite simple. Don't use an iframe for the file upload. Just put your form with the file upload dialog into the main page. If the upload is finished the server can send a redirect back to the client and then the user is redirected to the new site. Or is there any problem with such simple solution?

UPDATE Because the simple solution doesn't work I suggest another solution. Add an onload event listener to the iframe. If the event handler of the onload event is called (that means the file upload is finished) then redirect the user. To redirect the user you can use window.location.href = "your new url"; But be aware that you add the event listener after the file form of the iframe is completely loaded or you have to ignore the first fired event (which would be the loaded file form) in you event handler.

Answer 2

just try this ...

1. when the form submission is completed(means file uploaded) in server side you need to set a session flag like $_SESSION['file_uploaded'] = TRUE;

Before the step1 in parent window you need to write an ajax function to check the session. That js ajax function continuously contact the server after the overlay(iframe) loaded.
when the server returns true you can hide the overlay and then redirect the page to some other location.

Answer 3

For this purpose I use either Valum's plugin or jQuery form plugin .

If you insist on iframe file upload, see older version of Valum's AJAX file upload . Either use his package, or see the code for inspiration. Don't get confused by the name; it doesn't use AJAX but iframe for file uploading.

Note that the newer version of Valum's plugin probably uses AJAX also.