:::: MENU ::::

How to upload file using jQuery, iframe and PHP

In this tutorial we’ll see how to upload a file with using jQuery and PHP.

jQuery Upload Tutorial

Pre-Requirements

  • make sure your server temp folder has file writing permission.
  • your server disk space is not full.
  • webserver user has write permission on /tmp or upload directory.

jQuery Setup

  • you could use latest version of jQuery i.e. 2.x or even older 1.x.x as this code doesn’t need any dependency of newer api.
  • I’d prefer google cdn for this example

<HEAD> Section

File upload form

Now JQuery part

PHP Code (upload.php)

So, what’s going on here

We created html form <#file_upload_form>. Then assigned jQuery submit() function to override form submit action. So, on from submit even following function will be called.

Now try to create and insert dynamic iframe into HTML document.

Once iframe is inserted into your HTML document let’s set form action into iframe.

So, now when you click submit button form is submitted to iframe which loads upload.php
Once upload.php is loaded we should do some action to convey user that upload has been done.
So, on iframe load even we get its content and display to user.

for demo purpose (to see ajax loader) we use sleep(5); function in upload.php file

Download Code – Jquery iframe upload


One Comment

So, what do you think ?

  •