I hope that this example of a PHP file upload progress bar will be helpful to PHP  developers who are looking for a simple way to display a file upload progress bar into their online forms and web applications. In my previous post I had created similar image uploader script using jQuery and PHP, I suggest you go through that tutorial, because we will follow the same procedure here, only thing we are going to add is the progress-bar.

AJAX

	$("#uploadForm").on('submit',(function(e) {
		$("#uploadForm").find('.progress-bar').removeClass('progress-bar-success')
										.removeClass('progress-bar-danger');
		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() 
	    	{
	    	},
			  xhr: function () {
                var xhr = new window.XMLHttpRequest();
                //Upload progress
                xhr.upload.addEventListener("progress", function (e) {
                    if (e.lengthComputable) {
                        var percentComplete = (e.loaded || e.position) * 100 / e.total;
                        //Do something with upload progress
                        console.log(percentComplete);
						$("#uploadForm").find('.progress-bar').width(percentComplete+'%').html(percentComplete+'%');
                    }
                }, false);
					xhr.addEventListener('load',function(e){
				$("#uploadForm").find('.progress-bar').addClass('progress-bar-success').html('upload completed....');
			});
			                return xhr;
            } 
				        
	   });
	}));

By Thirumani Raj posted on - 2nd Apr 2016

Live Demo Download Script