How to Associate / Synchronize Progressbar Uploading File Process

How to Associate / Synchronize Progressbar Uploading File Process

Hi All,

I need to Sync progressbar with my uploading file process. For that matter I'm using jquery ui progressbar.
I copied some code from jqury site and tried to sync with my uploading file when i execute code progressbar displays 'Completed' and file still uploading.

My question is How to Sync progressbar with uploading file?

js code
 
  1. $(document).ready(function () {
	$('#btn').click(function (e) {
		var files = $('#<%= imageUpload.ClientID %>')[0].files;
		if (files.length > 0) {
			var formData = new FormData();
			for (var i = 0; i < files.length; i++) {
				formData.append(files[i].name, files[i]);
			}
			
			$.ajax({
				url: 'UploadHandler.ashx',
				method: 'POST',
				data: formData,
				contentType: false,
				processData: false,
				success: function () {
					progressbarlbl.text('Completed...');
					progressbarDiv.fadeOut();
				},
				error: function (err) {
					alert(err.statusText);
				}
			});
			
			var progressbarDiv = $('#progressbarDiv'),
				progressbarlbl = $('#progressbarlbl');
				
			progressbarlbl.text('Uploading....');
			progressbarDiv.progressbar({
				value: false,
				change: function () {
					progressbarlbl.text(progressbarDiv.progressbar('value') + '%');
				}
			}).fadeIn(500);

			function progress() {
				var val = progressbarDiv.progressbar("value") || 0;
				progressbarDiv.progressbar("value", val + 2);
				if (val < 99) {
					setTimeout(progress, 80);
				}
			}
			setTimeout(progress, 2000);
		}
	});
});
Upload Handler
 
  1. public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
		if (context.Request.Files.Count > 0)
        {
			HttpFileCollection httpFileCollection = context.Request.Files;

            for (int i = 0; i < httpFileCollection.Count; i++)
            {
                HttpPostedFile file = httpFileCollection[i];

                string imageFolder = @"~/TestUpload" + "/" + file.FileName;
                file.SaveAs(context.Server.MapPath(imageFolder));
            }
        }
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

    public T Deserialize<T>(string context) {
        string jsonData = context;
        var obj = (T)new JavaScriptSerializer().Deserialize<T>(jsonData);
        return obj;
    }

Thanks in advance
Regards