How to upload something with “ajax” look!

I’ve been working on G-Projects (my first wordpress plugin that’ll be published soon) for a while now. The most irritating and annoying issue that I faced was uploading a file without leaving the page. Ofcourse the first thing that came to my mind was to use jQuery as it solved like 100% of my problems excluding this one. I figured out that to upload something (in my case an image) without leaving the same page i.e. “ajax” you have to use an iframe as it seems that no one has invented it yet!

My Case

  1. Submit form elements and save them into the database using jQuery.
  2. Upload the image.
  3. Hide the form.
  4. All in the same page

A form is as simple as the following

Please enter a title

Description please

As you see just 2 input fields : a title and a description. Now in another html/php file, create the image upload form. That is the following

Select the Screenshot

Notice that there’s no submit button. Now, to the parent page (the one that contains the main form) add the javascript function that will submit the first form

As pointed out by the inline documentation, I used jQuery .submit() to submit the form. First of all, get the iframe element by the id, fetch its contents, locate the form using the form id and finally submit the form. Now, the main problem is that a file might be large enough to delay the response that is, we need to wait for the file to be uploaded or in other words, wait for the iframe to load then hide the form. My solution is, create another function that hides the form.

function hideMyForm(){

Then in the page that contains the image upload form use the body onload event to call the function that hides the form in the main page .. as simple as

Hope everything is clear and worth the time.

2 thoughts on “How to upload something with “ajax” look!

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>