Upload Image Without Page Load Using Ajax jQuery And PHP

Uploading image without page refresh is very important nowadays.In this tutorial I will show you how to upload image without page load using ajax jQuery and PHP.For this we will use jQuery form plugin.You can download this  jQuery form plugin through which we will upload image without page load.

Upload Image Without Page Load Using Ajax jQuery And PHP

Application Development Process:

Step-1) jQuery and jQuery Form Plugin Links

These are the links for jQuery and jQuery form plugin you can download from these links.

jQuery: jQuery Download

jQuery Form Plugin: Plugin Download

Step-2) HTML Markup for Image Upload

This is the html code for the form to upload image with jquery ajax script.

Step-2) jQuery Code for Uploading Image

Here this is the jQuery code we will use to upload the image.

Step-3) PHP Code for Image Upload

This is the PHP code for upload Image.

Step-4) Complete Code for Upload Image with jQuery AJAX and PHP

This is the complete jQuery AJAX PHP script to upload a image without page refresh.

In this script first, we create an HTML form which contains an input field with type file and an upload button for uploading image.

  • Then we include the jQuery and jQuery form plugin to upload the image without page load.
  • After it we use document.ready function it will ready the ajaxform code to run whenever user clicks on submit button.So whenever a user will click on the submit button ajaxform will upload the image and prevents the page load.
  • In PHP code we get the image which is sent by our jQuery code ajaxform and then upload it to our image folder.


So this is how we can Upload Image Without Page Load Using Ajax jQuery And PHP. I hope you learned in this tutorial how to upload an image without page refresh using jQuery AJAX.If you like this tutorial script then share it with your community. If you have any suggestion Feel free to comment below.


Read previous post:
jQuery Email Validation using Regex Expression

Email Validation is very important in online web forms.So today In this tutorial I will explain you how to do jQuery...