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

Ajax Image Upload using PHP and jQuery

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

12 COMMENTS

  1. Dankooooh says:

    Hi Uri, i have tried these code for my website and it has worked for me. In case the problem persists, download a working demo for the same code here

    Reply
  2. Uri Horsemouth says:

    hello im kind of new to jquery and ajax technologies. Im trying to incorporate your code into a project that im working on. Your code does not upload an image. It show’s the preview of the picture that i select for upload, but it fails to actually upload the picture to my server, the code stops at the “Loading…” part of the code. The code is simple so im kind of lost… should i rewrite the upload.php file?

    And i cant figure out what does the script actually do with the picture that i have uploaded.

    Please help! Anybody

    Reply
    1. Amit Sonkhiya says:

      Hi Uri

      I’m sorry to hear about your concern and want to give you a few tips. First of all ensure that url: “upload.php” in $.ajax({ should be the as same as the name of your php script at server. Second you can use print_r($_FILES) to check are you getting data by ajax and last, the folder where you want to save uploaded photos should exist.

      Still if you are unsure and unable to resolve, you can write us at support@fellowtuts.com

      Reply
    2. Dankooooh says:

      Hi Uri, i have tried these code for my website and it has worked for me. In case the problem persists, download a working demo for the same code here

      Reply
  3. 柏澔 吳 says:

    請問我能夠跟您要一份檔案嗎
    您的檔案似乎無法下載
    最近正在學習 File API 和 MySQL 、AJAX 中 出現了一些問題
    您的程式介紹寫得非常簡單,但我還是不太了解
    謝謝您!

    Reply

Leave a Reply