PHP AJAX Image Upload

Hi all,
In this article shows how to upload an image file using PHP and AJAX. In here, we are sending form data to PHP script using ajax(). First we upload the image through PHP form and return success message as AJAX response.

Table Of Content

1. The HTML
2. Ajax
3. Stylesheet/CSS

The HTML

HTML part is very important part in web development. The <input> tag is specified in HTML part.
For upload image we specify the type=”file” in input tag like: <input type=”file” name=”user_Image” />

	

		
No Image
		

			Upload Image File:

			
			
		
	

AJAX

Stylesheet/ CSS

.div_bgColor {
width: 440px;
height:100px;
background-color: #F9D735;
}
.div_bgColor label{
font-weight: bold;
color: #A0A0A0;
}
#image_preview{
float:left;
width:100px;
height:100px;
text-align:center;
line-height:100px;
font-weight: bold;
color: #C0C0C0;
background-color: #F0E8E0;
overflow:auto;
}
#image_preview_layer{
float:right;
padding: 10px;
}
.btn_submit {
background-color: #3FA849;
padding:4px;
border: #3FA849 1px solid;
color: #FFFFFF;
}
.input_data {
padding: 3px;
background-color: #FFFFFF;
}

upload_image.php

Full Code

	

		
No Image
		

			Upload Image File:

			
			
		
	

OUTPUT

After uploading image via AJAX, we are loading the image to the target layer in the left side of the above form. So the output will be:

Happy Coding

If anyone has doubts on this topic then please do let me know by leaving comments or send me an email.