Support us .Net Basics C# SQL ASP.NET Aarvi MVC Slides C# Programs Subscribe Download

asp.net 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 asp.net file upload control



While the files are being uploaded we want to display the jQuery progress bar.

asp.net 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.

asp.net file upload jquery progress bar

Step 1 : Create new asp.net 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++)
                {
                    System.Threading.Thread.Sleep(1000);
                    HttpPostedFile PostedFile = selectedFiles[i];
                    string FileName = context.Server.MapPath("~/Uploads/"
                        + Path.GetFileName(PostedFile.FileName));
                    PostedFile.SaveAs(FileName);
                }
            }
        }

        public bool IsReusable
        {
            get
            {
                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="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <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');

                    $.ajax({
                        url: 'UploadHandler.ashx',
                        method: 'post',
                        data: formData,
                        contentType: false,
                        processData: false,
                        success: function () {
                            progressbarLabel.text('Complete');
                            progressbarDiv.fadeOut(2000);
                        },
                        error: function (err) {
                            alert(err.statusText);
                        }
                    });

                    progressbarLabel.text('Uploading...');
                    progressbarDiv.progressbar({
                        value: false
                    }).fadeIn(500);
                }
            });
        });
    </script>
</head>
<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">
                    Uploading...
                </span>
            </div>
        </div>
    </form>
</body>
</html>

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

9 comments:

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

    Thanks

    ReplyDelete
  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.

    ReplyDelete
  3. hi venkat thanks for great teachings,

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

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

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

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

    ReplyDelete
  6. How to rename file before move in folder?

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

    ReplyDelete

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