Support us .Net Basics C# SQL ASP.NET Aarvi MVC Slides C# Programs Subscribe Download multiple file upload with progress bar

Suggested Videos
Part 81 - jquery tooltip widget
Part 82 - jquery tooltip from database
Part 83 - jquery ui progress bar

In this video we will discuss, using jQuery progressbar with file upload control

While the files are being uploaded we want to display the jQuery progress bar. multiple file upload with progress bar

As soon as the upload is complete, we want to display complete message in the progress bar, and it should slowly fade out. file upload jquery progress bar

Step 1 : Create new web application project. Name it Demo.

Step 2 : Add a New Folder to the project. Name it Uploads.

Step 3 : Add a new Generic Handler to the project. Name it UploadHandler.ashx. Copy and paste the following code

using System.IO;
using System.Web;
namespace Demo
    public class UploadHandler : IHttpHandler

        public void ProcessRequest(HttpContext context)
            if (context.Request.Files.Count > 0)
                HttpFileCollection selectedFiles = context.Request.Files;
                for (int i = 0; i < selectedFiles.Count; i++)
                    HttpPostedFile PostedFile = selectedFiles[i];
                    string FileName = context.Server.MapPath("~/Uploads/"
                        + Path.GetFileName(PostedFile.FileName));

        public bool IsReusable
                return false;

Step 4 : Add a WebForm to the project. Name it WebForm1.aspx. Copy and paste the following HTML and jQuery code

<%@ Page Language="C#" AutoEventWireup="true"
    CodeBehind="WebForm1.aspx.cs" Inherits="Demo.WebForm1" %>

<!DOCTYPE html>
<html xmlns="">
<head runat="server">
    <script src="jquery-1.11.2.js"></script>
    <script src="jquery-ui.js"></script>
    <link href="jquery-ui.css" rel="stylesheet" />
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btnUpload").click(function (event) {
                var files = $("#FileUpload1")[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]);

                    var progressbarLabel = $('#progressBar-label');
                    var progressbarDiv = $('#progressbar');

                        url: 'UploadHandler.ashx',
                        method: 'post',
                        data: formData,
                        contentType: false,
                        processData: false,
                        success: function () {
                        error: function (err) {

                        value: false
<body style="font-family: Arial">
    <form id="form1" runat="server">
        Select Files :
        <asp:FileUpload ID="FileUpload1" runat="server" AllowMultiple="true" />
        <br /><br />
        <input type="button" id="btnUpload" value="Upload Files" />
        <br /><br />
        <div style="width: 300px">
            <div id="progressbar" style="position: relative; display: none">
                <span style="position: absolute; left: 35%; top: 20%" id="progressBar-label">

Please note : contentType option should be set to false to tell jQuery to not set any content type header. processData option should also be set to false, otherwise, jQuery will try to convert your FormData into a string, which will fail.

jQuery tutorial for beginners


  1. Sir,
    Please provide us a video explaining large files upload (1GB+) with real % ProgressBar.


  2. If I run this example it works with 1 file, but if try to upload 2 of more files I get an "Internal Server Error". Can somebody explain why and how can I solve this problem somewhere in Windows settings.

  3. hi venkat thanks for great teachings,

    in my case Allowmultiple="true" is not working multiple=true is working why like that

  4. var files = $("#FileUpload1")[0].files;
    this code has been used what does it mean by ?
    i couldn't get it.

    1. I changed it to
      var files = $("#<%=FileUpload1.ClientID%>").get(0).files;
      and it works good.

  5. What if my file upload control is inside a gridview item template

  6. How to rename file before move in folder?

  7. How to implement progress bar with percentage completion in multiple tabs..? Please help me with this sir..


It would be great if you can help share these free resources