Site Overlay

asp net multiple file upload with progress bar

Link for all dot net and sql server video tutorial playlists

Link for slides, code samples and text version of the video

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. As soon as the upload is complete, we want to display complete message in the progress bar, and it should slowly fade out.

UploadHandler.ashx 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;

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


Xem thêm các bài viết về Giải Trí:

29 thoughts on “asp net multiple file upload with progress bar

  1. Hi, thank you so much for the tutorial. I'm experiencing an error on
    <— error occurred here.

    value: false


    the object doesn't support property or method progressbar.

    here is the full code
    ar progressbardiv = $('#progressbar');

    var progressbarlabel = $('#progressbar-label');


    url: ajaxurl,

    data: docfile,

    async: false,

    processData: false,

    contentType: false,

    type: 'POST',

    success: function (data) {




    error: function (data) {







    value: false



    any help would truly appreciate it.

  2. Sir can you provide idea on multiselect drop-down in I am using so many plug ins available in Google those are freezing the page.

  3. Dear Sir, your video was helpful, however, I am not able to upload to Internet server via using same code, Its giving me error. Please help me, I am in a urgent need. Please help me

  4. on line "var files = $('#FileUpload1')[0].files;" I get the following error:
    "TypeError: $(…)[0] is undefined" — can you advice?

  5. Hi, Thanks Sir for you time . i Have a question please, and it is very common for everbody here suppose Why doesnt it with jquery ajax and a webform.aspx, there is some method for do that ? i tried do this without succes. For many many hours =(

  6. how do I get more benefit by using jquery,asp service in hybrid mobile apps across all the mobile platform Android,iOS,windows ? could you please suggest that where and how to do mobile jquery a platform independent? I found few things that is working fine in Android app, but not in iOS app.

  7. Thank a lot! However, it's not easy to follow these examples without ASP.NET knowledge. I'm still trying to sort the topics for myself to learn/practice, and now I have to go to ASP.NET tutorial 🙂

  8. Is it possible to show real time percentage on the progress bar? I tried JQuery fileupload method but I had a hard time uploading files with a submit button. I need percentage info like fileupload function and this submit button functionality.

  9. Many thanks for the highly-regarded efforts of yours.
    I've got an urgent quest and I would extremely appreciate if you or any one else could positively respond to it.
    I have used the the same procedure described in the tutorial and it works fine locally but when I deployed my app to the hosting server it keeps throwing a 500 error and I wonder why?
    What extra things need to be done (e.g. handler registration in the web.config file) in order to get it working online and enable me to upload the images freely

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

  11. Hi Pragim,

    Could you please update the videos for latest interview questions. It would be really thankful if you help me out.

  12. I have been learning c# and ASP.Net MVC from many videos and i found your videos are very clear and meaningful. I am wondering if there is any videos about deploying website with database.

Leave a Reply

Your email address will not be published. Required fields are marked *