Tag Archives: upload


jQuery Ajax File Upload with Progress Bar

File upload should always have a progress bar. It is a feature that most of the developers ignore. It should be seen as part of the functionality. The users cannot sit in the dark and keep guessing about the background progress.

When the user requests the server to perform some operation, it is good to show them about the progress. It is a good UI/UX behaviour. The progress bar is one of the best ways to show the status of the in-progress operation. In this example, let us learn to create a progress bar using jQuery while uploading a file via AJAX.

A file input option is used to choose the file and the file binaries are posted to the server via AJAX. After sending the file upload request to the server, the AJAX script initializes jQuery animation to show the file upload progress bar. The progress bar will highlight the progressing percentage with jQuery animation. The jQuery Form plugin is used in this example code to handle the AJAX image upload with progressive status.

HTML Form with File Upload

The landing page will show a HTML form with the file input. Users will choose the file and post the file data by submitting the form via AJAX. The jQuery and jQuery Form library is included at the beginning of the script. A minimal jQuery validation script is added to check if the image file had been chosen before submitting the form.

<!DOCTYPE html>

<meta http-equiv="Content-type" content="text/html; charset=utf-8">

<link rel="stylesheet" type="text/css" href="style.css">

    <h1>jQuery Ajax Image Upload with Animating Progress Bar</h1>
    <div class="form-container">
        <form action="uploadFile.php" id="uploadForm" name="frmupload"
            method="post" enctype="multipart/form-data">
            <input type="file" id="uploadImage" name="uploadImage" /> <input
                id="submitButton" type="submit" name='btnSubmit'
                value="Submit Image" />

        <div class='progress' id="progressDivId">
            <div class='progress-bar' id='progressBar'></div>
            <div class='percent' id='percent'>0%</div>
        <div style="height: 10px;"></div>
        <div id='outputImage'></div>

AJAX Form Submit to Request Server File Upload with Progress bar

The jQuery form library is used to submit the form via AJAX with an animated progress bar. The ajaxForm() function is used to submit the image file binaries to the PHP. The progress of the image upload is shown with a progress bar in the uploadProgress callback function. Also, the jQuery animate() method is called to create the progressing effect on the progress bar element.

$(document).ready(function () {
    $('#submitButton').click(function () {
    	        target: '#outputImage',
    	        url: 'uploadFile.php',
    	        beforeSubmit: function () {
    	        	   if($("#uploadImage").val() == "") {
    	        		   $("#outputImage").html("<div class='error'>Choose a file to upload.</div>");
                    return false; 
    	            $("#progressDivId").css("display", "block");
    	            var percentValue = '0%';

    	        uploadProgress: function (event, position, total, percentComplete) {

    	            var percentValue = percentComplete + '%';
    	                width: '' + percentValue + ''
    	            }, {
    	                duration: 5000,
    	                easing: "linear",
    	                step: function (x) {
                        percentText = Math.round(x * 100 / percentComplete);
    	                    $("#percent").text(percentText + "%");
                        if(percentText == "100") {
    	        error: function (response, status, e) {
    	            alert('Oops something went.');
    	        complete: function (xhr) {
    	            if (xhr.responseText && xhr.responseText != "error")
        	            	$("#outputImage").html("<div class='error'>Problem in uploading file.</div>");