Professional Website Development:
Website Design, Development and Promotion

Do you want a cheap website?

Perhaps, based on a free content management system (CMS), overloaded with controls, settings and options you will never ever use?

Limited to the availability of add-ons and plugins which rarely fit your needs out of a box?

Well, you should try searching for other people who may be interested in this kind of a job.

At Site-o-Matic we like to do stylish high quality bespoke websites, fully tailored to your needs and desires.

Have a look at our previous works and decide for yourself if you want us to do your website.

Ajax Image Upload




Ajax Image Upload

In this article I will describe the process of uploading images (or any files) to the server without having to refresh the page and how to change the page dynamically, when the file upload finishes.

First of all, it is not really Ajax. You don't use JavaScript or XML to upload the image. You do use JavaScript and, possibly, XML, to parse server's response.

The theory is simple - you create an iframe and direct your form submission to this iframe. The trick is that you move this iframe off the screen so the visitor does not see it.

Once you submit your form (with the file attachment), JavaScript will wait until your hidden iframe loads up with the server response. Depending on the response, JavaScript will update the page dynamically.

So, to demonstrate Ajax image upload we need:

  • HTML form to submit the image

  • Simple PHP script to process the image submission and respond

  • jQuery JavaScript library to react to submission and to server response

First of all, make sure you have imported jQuery library. You can either download jQuery and use it as local resource:

<script type="text/javascript" src="jquery.js"></script>

or you can link to the remote resource which will always be the latest version:

<script type="text/javascript" src=""></script>

Next what we need is the HTML form:

<div id='ajax_upload_demo'>

<form id='image upload_form' method='post' enctype='multipart/form-data' action='add_avatar.php' target='upload_to'>

<p>Upload avatar</p>

<p><img src='avatar_no.jpg' /></p>

<p><input type='file' id='file_browse' name='image' /> <input type='submit' value='Submit'></p>


<iframe name='upload_to'>



Now we need to style it a little, so the iframe can't be seen by the visitor:


div#ajax_upload_demo iframe {






div#ajax_upload_demo img {





Now we need to add some JavaScript:

<script type='text/javascript'>



$('div#ajax_upload_demo img').attr('src','loading.gif');



var result = $(this).contents().text();

if(result !=''){

if (result == 'Err:big'){

$('div#ajax_upload_demo img').attr('src','avatar_big.jpg');


if (result == 'Err:format'){

$('div#ajax_upload_demo img').attr('src','avatar_invalid.jpg');


$('div#ajax_upload_demo img').attr('src',$(this).contents().text());





In bold you can see some file names you could change.

This script does two things:

  1. When the form is submitted (upload starts) it changes image to 'loading' image to respond to the user.

  2. When upload is completed and PHP script put some feedback into the iframe, JavaScript will update the image accordingly - either display an error image or display the image uploaded.

Download a stand-alone ajax image upload demo.

Hope you have enjoyed this tutorial!

ajax ajax image ajax image upload ajax upload

How to Style Input and File Browse Buttons with CSS

How to Style Input and File Browse Buttons with CSS

When you get to style a website you often want to customize the looks of buttons on your input...

Read more

TinEye - Search the Web by Image the Same Way You Search Google by Text

TinEye - Search the Web by Image the Same Way You Search Google by Text

Imagine you have a thumbnail of a very nice image. This thumbnail is small and probably quite low on quality. It's named something like x87z87bsxz9.jpg and you have totally no idea how to even...

Read more

Potential Problems of PHPBB3 Forum Indexation

Potential Problems of PHPBB3 Forum Indexation

Some time ago an acquaintance of mine has approached me and asked if I could fix their forum (let's call it X) indexation issues. Having no real experience back then I replied, that I can try,...

Read more

View all posts

31 October 2011 00:21

Thank you!!

Wery good script

19 November 2011 18:25


Unfortunately the stand alone script does not work. The Javascript function always reports it get back either a NULL or an empty string value at :
var result = $(this).contents().text();

.. so that text result is empty. This means there can be no link to the uploaded image, although it did upload. Saddly that's only half the story and I can't figure out how to fix it. Nice try though :(

20 November 2011 01:54

Eugene @

Thank you!

I have checked and indeed the demo was not working. Turns out that the jQuery resource to which it was linking (hosted by some Google resource) was updated some time ago and since then the function which jQuery relied upon to get contents of an iframe was not working.

Basically, jQuery imported by the demo, was broken.

I have corrected the article and the demo archive to link to the same jQuery instance as used by the website here, so now it all works again. Feel free to download the updated archive or change the jQuery link yourself.

Thanks for pointing the problem out again.

20 March 2012 19:29


Great script! Working well. Thank you!
I am having trouble pointing it to the correct file on my server. Any hints!
Thanks again!

20 March 2012 19:35

Eugene @

Can you give more information? What exactly you are trying to do and how?

20 March 2012 20:32


Thank you, Eugene!
I am just trying to point the php script to a specific folder on my server--- “images” This folder would be public_html/images
I am unsure of how to specify the path to this folder or exactly which lines I need to change.

Eugene, what type of security issues do I need to address with this uploader? I do not want to compromise the security of my site.

Thanks so much for your time!

20 March 2012 20:44

Eugene @

Well, the only thing going on there is a user submitting an image and then this image being saved on the server and printed to the screen.
I would not say there is much security involved here.

If the add_avatar.php is in the root (public_html/) then you need to change this line (13):
$path = "/";

It should be: $path = "images/";

I have done it quite a while back, so I might be wrong. But try it.

Also, you need to make sure that write permissions are granted for php for the images folder. If the server is Apache, the attributes for the images folder should be 777

20 March 2012 20:56


Yes, I did exactly what you have here. And I also checked that the permissions were correct. I’ll try again. I’ll let you know if I am successful!

20 March 2012 21:14


Well--for some reason it just won’t see that file. I’ll keep trying!

24 March 2012 09:26


Can we get value of any textbox using the code of image upload with image .if yes then hoe thanks in advance.

24 March 2012 11:19

Eugene @

Pushpendra, what exactly do you need it to do?

Do you mean you want to get contents of an iframe?

22 June 2012 02:20



I tried to Download a stand-alone ajax image upload demo. but not working. Can i get the php code also.

22 June 2012 12:26

Eugene @

The PHP code is included in the archive, make sure you are running it on a web server.

25 June 2012 04:04


After i upload the image, where is the place the image go?

25 June 2012 20:24

Eugene @

In the given code example: function copyFromTemp($path = "",$keep_name = false)
the first parameter would be the path to copy to. Just put in the desired path when you are setting up the script.

26 June 2012 03:44


Can I know how to upload image without clicking submit button.
Many thanks

26 June 2012 10:19

Eugene @

@ 26 June 2012 03:44 Anonymous

Yes, you can do that. You need to have an "onchange" listener attached to the browse button (actually, to the <input type=file>), and as soon as it changes, check that the file name has appropriate extension (like jpg, jpeg, gif etc) and then submit the form automatically.

11 August 2012 18:44


image always go to root folder, what;s up with that?

11 August 2012 19:06

Eugene @

@11 August 2012 18:44 Anonymous

Line 13: $path = "/";
Did you try changing this?

7 October 2012 17:21


How could i check that the file is a certain height/width too ? eg . height = 600 , width = 300 ?

7 October 2012 18:17

^ That guy ^

Don't worry found out myself :)

6 December 2012 09:40


To upload image into the directory set with the $path variable you have to change this line in the php file.

if (move_uploaded_file($this->temp_name,$nname))
if (move_uploaded_file($this->temp_name,$path.$nname))

13 December 2012 12:40


Same question of "7 October 2012 17:21Anonymous".
How check the height/width?
If someone has a solution to offer, I have not succeeded.

18 December 2012 17:33


very good

22 January 2013 19:03


That is the best solution I've found, and the code is so well written. Thanks.

2 April 2013 08:22


I've tried this script and the demo works well, but when I put if in my page I get and error relating to encoding. It says that the form was submitted in the windows 1252 encoding and that to avoid issues in need to be in UFT-8. I would appreciate an explaination as to what this is telling me. I see nothing I can grab onto in the code. Thanks if anyone can help.

2 April 2013 21:07

Eugene @


If you use Apache web server, you can try to add this line to the .htaccess file:
AddDefaultCharset utf-8

3 April 2013 05:39


Thank you. It now works great.

11 August 2013 10:02


it up nice script


Your comment: