Ajax Image Upload using PHP and jQuery

Ajax Image Upload using PHP and jQuery

Ajax Image Upload using PHP and jQuery is very important topic nowadays because everybody wants to save their data without refreshing the page. Today we are going to generate an Ajax based image uploader, which means the image file will be uploaded to server using Ajax request, without reloading the page. We are using jQuery AJAX to send image file to the server side PHP script. We can also use HTML5 File API to check file size and image type before uploading.

Download zip

Steps for PHP AJAX Image Upload
1. Add jQuery library
2. Create HTML for image upload form
3. Send file data to PHP via AJAX
4. Write PHP script to upload image

Ajax Image Upload using PHP and jQuery

HTML code

It’s the simple form and full page HTML code includes jQuery library & our AJAX file upload script and necessary CSS (Download zip in the end).

AJAX Code
On submit, the AJAX call will be triggered to send form’s file input to the PHP page upload.php.

We are sending image file data by instantiating FormData. The success/failure handlers are triggered based on the result of the upload request.

PHP code

It’s a sample code to understand how to save uploaded file to server. Download the zip containing full working code including validation and safely upload image to server, at end of this article.

Preview Uploading Image and validation

Ajax jquery file type error

If we want to show preview and validate the image being uploaded before submit. Here is the code:

Above given code is written in short manner so that AJAX file uploading process would be understandable easily with little bit knowledge of jQuery, AJAX, HTML5 and PHP.

Download zip

You Might Interested In