Hello friends, In this post you’ll learn how to create Ajax File Upload with Progress bar. In my previous blog I show you how to create simple guestbook using ajax. Ajax file uploader is useful web tool, which is actually very easy to create with Ajax, jQuery and PHP. The example we’re going to use supports uploading single file in a single request. The script will upload a file to the server, show a progress bar highlighting how much has been completed, and then finally return the uploaded file file and the status.

Before creating Ajax File Upload application we need to know the usage of jQuery Form Plugin. I use this plugin to submit the form. Lets build the application. If you want to use Ajax File Upload application you need three simple steps. First create the html form, second create custom.js file where you put the custom jQuery for run the script and at last create a upload_file.php file, using this file you move your image into a folder. But create a upload folder into your directory for saving the images.



Step1:Create html markup and include main js, jQuery Form Plugin js and custom js

At first when you view the html form upload button is initially disable. After upload an image it will enable and then you click on upload button. Here I write a simple jQuery for this. Ajax File Upload form is well commented so please read the comment. It will help you to integrate it with your website.

Step2: Create custom.js file

The file is well commented. I think you will understand all the code easily.

Step3: Create upload_file.php

Simply paste the below code into upload_file.php

Now you are done download the code and try it your home.

Demo
Download

Spread the love
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Ajax File Upload with Progress Bar
Tagged on:         
  • Avishek Mondal

    Thanks for the awesome code. Its really works. It really help for PHP beginners.