In this tutorial i wll show you how to upload an image using php ajax without page refresh. The image will be displayed on the same page once you uploaded it.The javascript code is been used to view the uploaded image into the particular mentioned div.

Simple jQuery/JavaScript code to upload and view image without page refresh. using $.ajax() method an image file wil be send to the ajaxupload.php file and file will be uploaded and viewed at the same time.

Jquery Ajax Code

$(document).ready(function (e) {
	$("#uploadForm").on('submit',(function(e) {
		e.preventDefault();
		$.ajax({
        	url: "upload.php",
			type: "POST",
			data:  new FormData(this),
			contentType: false,
    	    cache: false,
			processData:false,
			success: function(data)
		    {
			$("#profileImage").html(data);
		    },
		  	error: function() 
	    	{
	    	} 	        
	   });
	}));
});

This file contains only PHP code which will upload an image to the directory images/ via ajax, i had used image validation in the script, so it allow only valid extension images. I also wrtiten validation for image size, the script will take only the image size less than 1 mb.

PHP Code: File - Upload.php

By Thirumani Raj posted on - 14th Feb 2016

Live Demo Download Script