Jquery,Ajax file upload in PHP

There are plenty of free jquery,ajax file upload plugins are available to download from google. But if you want to learn your own way to do this , we have written tutorials for image uploading using Jquery,Ajax in PHP. In this tutorial we will able to upload images without page reloading .
First we have to create a HTML file to display form for uplaoding image .Find below it's code

We also require some css for stylising the HTML form upload page. Find below CSS code

Now include jquery file to your document . You may either call using any CDN or download jquery and put inside your folder . We are using CDN as shown below

Now put below js code .It will handle user browsed file then send it to upload.php to upload in server using PHP script . This file also limit user to upload maximum 1 MB size of image, Yo can change as per your requirements .

Finally ,we need a php file i.e upload.php .This file first check allowed image extension then it upload to server . Below file also return response in JSON format. We can use this in html page to show any success message .