Categories
Asp, Asp.net

How To Upload Multiple File With Progress Bar Using jQuery In Asp.Net

How To Upload Multiple File With Progress Bar Using jQuery In Asp.Net

In this post we will learn How To Upload Multiple File With Progress Bar Using jQuery In Asp.Net. Here we are using a plugin uploadify which you can download from here. http://www.uploadify.com/download/

I have used Uploader.ashx in this we will write the code to upload files in folder for that Right click on your application >> Select Add New Item >> Select Generic Handler file and Give name as Uploader.ashx >> Click OK.

Open Uploader.ashx file and write the following code.

Code Uploader.ashx

<%@ WebHandler Language="C#" Class="Uploader" %>

using System;
using System.Web;

public class Uploader : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        HttpPostedFile uploadFiles = context.Request.Files["Filedata"];
        string pathToSave = HttpContext.Current.Server.MapPath("~/Upload_Files/") + uploadFiles.FileName;
        uploadFiles.SaveAs(pathToSave);
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

Design Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>How To Upload Multiple File With Progress Bar Using jQuery In Asp.Net</title>
<link type="text/css" rel="stylesheet" href="css/uploadify.css" />
<style type="text/css">
body
 {
 width: 980px;
 margin: 0px auto;
 text-align: center;
 padding-top: 50px;
 font-size: 20px;
 }
</style>
<%--Javascript--%>
<script src="http://code.jquery.com/jquery-2.1.0.min.js" type="text/javascript"></script>
<script src="js/jquery.uploadify.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $("#file_upload").uploadify({
            'swf': 'uploadify.swf',
            'uploader': 'Uploader.ashx',
            'cancelImg': 'cancel.png',
            'buttonText': 'Select Files',
            'fileDesc': 'Image Files',
            'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
            'multi': true,
            'auto': true
        });
    })
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h2>How To Upload Multiple File With Progress Bar Using jQuery In Asp.Net</h2>
<br /><br />
<asp:FileUpload ID="file_upload" runat="server" />
<br /><br />
<br /><br />
All rights reserved by <a href="http://www.hightechnology.in">www.Hightechnology.in</a>
| Hosting partner <a href="http://www.grootstech.com" target="_blank">Grootstech</a>
</div>
</form>
</body>
</html>

download