File Upload with handler ashx ASP.NET C#

 aspx file

<%@ Page Title="" Language="C#" MasterPageFile="~/View/CertificationAgency/CertificationAgency.master" AutoEventWireup="true" CodeFile="BulkUpload.aspx.cs" Inherits="View_CertificationAgency_KIACertificate_BulkUpload" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">

<style>

.fileuploadDiv{

 background-color:#E4F3F7;

 height:250px;

 width :80%;

 margin:0 auto;

 padding:15px;

 }

 .upload input{

 display: none;

}

.button{

background-color:green;

border:0;

padding:10px 40px;

color:#FFF;border:#F0F0F0 1px solid;

border-radius:4px;

}

.status{

 display: none;

 padding: 5px;

 background: #F47063;

 width: 100%;

 color: white;

 margin: 8px 0;

}

.progress {

    border: 0 solid #ddd;

    border-radius: 15px;

    margin: 10px auto;

    padding: 5px;

    position: relative;

    width: 70%;

}

.bar{

 background: #008DE6;

 height: 20px;

 width: 0%;

 /* transition animation */

 -webkit-transition: width .3s;

 -moz-transition: width .3s;

 transition: width .3s;

 

}

.percent {

 position: absolute;

 display: inline-block;

 top: 6px;

 left: 48%;

 color: #333;

}

</style>

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <script src="http://malsup.github.com/jquery.form.js"></script>

   <script type="text/javascript">

       $(document).ready(function () {

           $("#btnUpload").click(function (evt) {

               /* variables */

               var status = $('.status');

               var percent = $('.percent');

               var bar = $('.bar');

               $('form').ajaxForm({

                   url: "FileUploadHandler.ashx",

                   type: "POST",

                   /* reset before submitting */

                   beforeSend: function () {

                       status.fadeOut();

                       bar.width('0%');

                       percent.html('0%');

                   },

                   /* progress bar call back*/

                   uploadProgress: function (event, position, total, percentComplete) {

                       var pVel = percentComplete + '%';

                       bar.width(pVel);

                       percent.html(pVel);

                   },

                   /* complete call back */

                   complete: function (data) {

                       status.html(data.responseText).fadeIn().fadeOut(1600);

                   }

               });

           });

       });

   </script>

 

  

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

 <div>

    <div class="fileuploadDiv">

    <div class="status"></div>

     <h3>Certificate Bulk Upload </h3>

     <input type="file" runat="server" accept="application/pdf" name="files[]" multiple="multiple" id="files" class="form-control" />

     <tt>(In .PDF format only)</tt>

     <hr />

     <center>

     <input type="submit"    value="Upload"  class="btn btn-primary" id="btnUpload" />

    

     </center>

           <div class="progress">

            <div class="bar"></div >

            <div class="percent">0%</div >

          </div>

    </div>

 

    </div>

    <br />

    <hr />

   

</asp:Content>

-----------------------------------------------

ashx file handler multiple file

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

 

using System;

using System.Web;

 

public class FileUploadHandler : IHttpHandler {

    int fileCount = 0;

    public void ProcessRequest (HttpContext context) {

        if (context.Request.Files.Count > 0)

        {

            HttpFileCollection files = context.Request.Files;

            for (int i = 0; i < files.Count; i++)

            {

                HttpPostedFile file = files[i];

                 string ext= System.IO.Path.GetExtension(file.FileName);

                 if (ext.ToUpper().Equals(".PDF"))

                 {

                     string fname = context.Server.MapPath("~/View/CertificationAgency/KIACertificate/Certificates/" + file.FileName);

                     file.SaveAs(fname);

                     fileCount++;

                 }

                

               

            }

            context.Response.ContentType = "text/plain";

            context.Response.Write(fileCount+ "Certificate Uploaded Successfully!");

        }

        

    }

 

    public bool IsReusable {

        get {

            return false;

        }

    }

 

}