PHP AJAX Image Upload

Last modified on August 17th, 2018 by Vincy.

Uploading image via an AJAX function is easy and simple to implement in out page. In a previous tutorial, we have seen PHP image upload example without AJAX. In this example, I have added code for doing PHP image upload with AJAX without reloading the page. 

I use jQuery AJAX to implement image upload. There is a form with file input field and a submit button. On submitting the form with the selected image file, the AJAX script will be executed. In this code, it sends the upload request to PHP with the uploaded image. PHP code moves the uploaded image to the target folder and returns the image HTML to show the preview as an AJAX response.

View Demo


HTML Image Upload Form 

The following code shows the HTML for the image upload form. On submitting this form the AJAX function will be called to send the request to the PHP image upload code.

<form id="uploadForm" action="upload.php" method="post">
<label>Upload Image File:</label><br/>
<input name="userImage" type="file" class="inputFile" />
<input type="submit" value="Submit" class="btnSubmit" />

PHP Image Upload via AJAX Method

This code shows the ajax() function used to send the file upload request by posting the FormData instance. In PHP, it uploads the file to the specified path. After successful image upload, it will print the uploaded image HTML as the AJAX in response. Then, this will be added to a target DIV to show the preview for the users.

<script type="text/javascript">
$(document).ready(function (e){
url: "upload.php",
type: "POST",
data:  new FormData(this),
contentType: false,
cache: false,
success: function(data){
error: function(){} 	        


After uploading an image via AJAX, we are showing preview for the uploaded image in the target div as shown below.


View DemoDownload

Comments to “PHP AJAX Image Upload”

  • Dinesh Sharma says:

    Thanks a lot sir !!!

    yesterday i was searching for such type of coding for by website for images upload but i want something more in this coding i want to resize the image size before submit. Please help me….

  • Mani says:

    Thank u. Your code really helpful for me.
    i have one more doubt. want develop a php project for fingerprint recognition. This possible or not. I was searched more sites, but most members say not possible. So i Want clear answer for this question vincy…

  • Edu says:

    Nice work!

    Only say, please, change blog font, it’s very difficult to read

  • kirti says:

    thanks alot 4 dis code… realy its working…

  • NILESH says:

    Thanks for sharing such nice article. It works like charm.

  • Pooya says:

    Thanks for this useful code. There is a problem with end tag in the HTML code. Please fix it.

  • Ben says:

    Most people mentioned that you can’t do this via ajax but I tried this and works fine for me. Thank you for the simple and nice code.

  • JW Griffith says:

    Thanks for the simple but elegant code, without a lot of clutter it was easy to incorporate in my system with mysql insertion. For those that need size and type…

    $sourcePath = $_FILES[‘userImage’][‘tmp_name’];
    $ImageSize = $_FILES[‘userImage’][‘size’];
    $ImageType = $_FILES[‘userImage’][‘type’];

  • Rajesh says:

    This code is very helpful but I need one more thing, I want to store image in MySql database and fetch them again according to need. but thank you for this code.

  • mika says:


    Oh, man! You are damn genius! Two days I’m trying to find some solution, i used jqueryform library, visited many sites, but decided the only problem here! Thank you!

  • faisal says:

    wow thanks a lot sir. i find this method.. thankss

  • Amit Kumar Raikwar says:

    can you give this code in java?

  • mexantos says:

    how about if we want to preview image before send request to server, i mean we want to check look and feel image in the browser before actually send or upload to the server.
    addition to this could i do upload multiple images to server with this?

    • Vincy says:

      Hi Mexanots (Nice name :-)

      What you have asked is available as part of another tutorial that is linked in this article.

  • Kunal Dongre says:

    nice to meet you vincy

  • s.sivaramaiah says:

    Mam i need same type but small change as gives image upload path complete with directory location

  • Ayush Srivastava says:

    Thank you, I want to update image using Ajax in Laravel. Please help

Leave a Reply

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

↑ Back to Top

Share this Article