In this tutorial, learn how to create ajax image upload using PHP, jQuery with image preview. Upload image without page refresh with ajax, jQuery and PHP. Upload image to a folder and preview the uploaded image in the frontend.

How to Create Ajax Image Upload Using PHP, jQuery With Image Preview

To explain the tutorial, I have created a live demo of the example. In the live demo, you have to select the image you want to upload. After you select the image, you have to click the upload button. The image gets uploaded to the folder and you can now check the preview of the uploaded image. The image will display only after the upload of the image to the folder.

Ajax Image Upload Using PHP Image

See Live Demo

You will also get error if you do not select the required format of the image like jpeg, jpg, png etc. Find these messages in the live image.

Click the ‘See Live Demo’ button to check the live demo of the example of ajax image upload using PHP, jQuery with image preview.

You can follow step-by-step description given below with the codes. Check the code and use or change them as per your requirement.

Steps to Create Ajax Image Upload Using PHP, jQuery With Image Preview

There are two steps you can use to create complete script code for image upload and image preview. The steps are given below.

  • In Step1: Create a PHP file Index.php contains HTML code of HTML form and jQuery Ajax code for form submission.
  • In Step2: Create PHP file Post.php contains PHP code to get image and upload it to the folder.

Now, let’s describe each step one by one with the code in each file given below for each steps.

Step1: Create Index.php file with HTML+Ajax code.
This file contains the HTML code and the Ajax code of jQuery to submit the form. The HTML code contains the HTML form with the file input and the button. User select the image file source and click on the submit button. The HTML code also contains a div element to append the image uploaded file to display the image after upload.

The form contains the required attributes method="post" and enctype="multipart/form-data" for file upload.
HTML Code

In the ajax code, the click event is using here for form submission. The FormData() can be use to get the form data using ajax. Also specify the url as Post.php to upload the image using the PHP script. After success of the image, the image gets appended to the specified div elemend with class name .myimg using the jQuery append().

Ajax Code

Now, Create a Post.php file to include the PHP script for image uploading. The script first get the name and type of the image. Perform certain checks to find the correct image format. If there is any error and if the format is not correct, you will get the error message. Otherwise, you will get the image preview with the image preview text.
Step2: Create Post.php contains PHP upload script.

The move_uploaded_file() gets the two arguments. The first argument is the name of the file and the second parameter is the path where you want to upload the image.

Hope, you like this tutorial of how to create ajax image upload using PHP, jQuery with image preview without page refresh. If you have any query regarding the tutorial, you can comment below to get the solution.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.