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

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






PHP AJAX Image Upload





No Image

OUTPUT





upload1

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:

upload2



Happy Coding

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

2 thoughts on “PHP AJAX Image Upload

  1. 82nqe

    can i buy clomiphene tablets where can i buy generic clomid without dr prescription can i order generic clomiphene for sale can you get clomiphene without insurance where can i get cheap clomid tablets how to get clomiphene no prescription can i order clomid online

  2. Cordell

    Hey there! Do you know if they make any plugins to assist with SEO?
    I’m trying to get my blog to rank for some targeted keywords
    but I’m not seeing very good results. If you know of any please share.
    Cheers! You can read similar blog here: Eco wool

Leave a Reply

Your email address will not be published.