jQuery AJAX Image Upload

by Vincy. Last modified on July 13th, 2022.

When you use AJAx in the right sense, it will improve the user experience largely. In this article, let use see how to do image upload using jQuery via AJAX and add great experience.

Showing preview without page refresh, showing the progress bar, adding preview with fade-in effect kind of minor feature additions to your image upload will help the user.

In a previous tutorial, I have given an example for uploading an image via AJAX using PHP. In this tutorial, I have improvised that code and added the above-described features. There is no other dependency apart from jQuery.

In this example, it shows a photo icon to select the image file to be uploaded. The preview for the selected image is shown in the preview box before upload. Then, the image upload jQuery function will be called on the click event of an upload button.

Image Upload HTML

This code shows photo icon in the middle of a preview box and an upload button. On clicking the photo icon a transparent preview of the image will be displayed in the preview box.

Then, this image will be uploaded to a folder on clicking the upload button. It shows a window overlay with a loader to represent that the image upload is in progress.

<div id="body-overlay"><div><img src="loading.gif" width="64px" height="64px"/></div></div>
<div class="bgColor">
	<form id="uploadForm" action="upload.php" method="post">
		<div id="targetOuter">
			<div id="targetLayer"></div>
			<img src="photo.png"  class="icon-choose-image" />
			<div class="icon-choose-image" >
			<input name="userImage" id="userImage" type="file" class="inputFile" onChange="showPreview(this);" />
			</div>
		</div>
		<div>
			<input type="submit" value="Upload Photo" class="btnSubmit" />
		</div>
	</form>
</div>

Uploading Image and Showing Preview using jQuery AJAX

This script contains a jQuery function showPreview(). It will be called when selecting the image file to be uploaded. This function is used to show a transparent preview of the selected image before upload.

<script type="text/javascript">
function showPreview(objFileInput) {
    if (objFileInput.files[0]) {
        var fileReader = new FileReader();
        fileReader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
			$("#targetLayer").html('<img src="'+e.target.result+'" width="200px" height="200px" class="upload-preview" />');
			$("#targetLayer").css('opacity','0.7');
			$(".icon-choose-image").css('opacity','0.5');
        }
		fileReader.readAsDataURL(objFileInput.files[0]);
    }
}
</script>

On clicking the upload button, it submits the form data to PHP via jQuery AJAX.In PHP code, it uploads the image to the target folder and returns the image HTML as an AJAX response. This AJAX response HTML will be added to the preview box.

<script type="text/javascript">
$(document).ready(function (e) {
	$("#uploadForm").on('submit',(function(e) {
		e.preventDefault();
		$.ajax({
        	url: "upload.php",
			type: "POST",
			data:  new FormData(this),
			beforeSend: function(){$("#body-overlay").show();},
			contentType: false,
    	    processData:false,
			success: function(data)
		    {
			$("#targetLayer").html(data);
			$("#targetLayer").css('opacity','1');
			setInterval(function() {$("#body-overlay").hide(); },500);
			},
		  	error: function() 
	    	{
	    	} 	        
	   });
	}));
});
</script>

Download

Vincy
Written by Vincy, a web developer with 15+ years of experience and a Masters degree in Computer Science. She specializes in building modern, lightweight websites using PHP, JavaScript, React, and related technologies. Phppot helps you in mastering web development through over a decade of publishing quality tutorials.

Related Tutorials

↑ Back to Top

Share this page