Upload Files Asynchronously With JQuery Uploadify Asp.Net

1:38:00 am 4 Comments

In this example i'm explaining how to Upload Multiple Files Asynchronously In Gmail Style With Progress bar Using JQuery Uploadify Plugin In Asp.Net C# and VB.

Download Latest JQuery Library And Uploadify Plugin.

Create a folder in application and add swf,css and js files in it from links above.

Open HTML source and add reference to these javascripts in head section.

<link href="Scripts/uploadify.css" rel="stylesheet" type="text/css"/>
<script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"/> 
<script src="Scripts/jquery.uploadify-3.1.js" type="text/javascript"/>
<script src="Scripts/jquery.uploadify-3.1.min.js" type="text/javascript"/>

Place one FileUpload Control on the page.

   1:  <form id="form1" runat="server">
   2:  <div>
   3:  <asp:FileUpload ID="FileUpload1" runat="server"/>
   4:  </div>
   5:  </form>

Add this JavaScript in Head section.

   1:  <script type = "text/javascript">
   2:  $(document).ready(function() 
   3:  {
   4:    $("#<%=FileUpload1.ClientID %>").uploadify(
   5:    {
   6:      'swf': 'Scripts/uploadify.swf',
   7:      'uploader': 'Handler.ashx',
   8:      'auto': true,
   9:      'multi': true,
  10:      'buttonText': 'Select File(s)'
  11:     });
  12:  });
  13:  </script>

Right Click on Solution explorer, Add new Generic Handler and write below mentioned code to save the file.

C# CODE
01<%@ WebHandler Language="C#" Class="Handler" %>
02using System;
03using System.Web;
04 
05public class Handler : IHttpHandler {
06 
07    public void ProcessRequest (HttpContext context) {
08        HttpPostedFile fileToUpload = context.Request.Files["Filedata"];
09        string pathToSave = HttpContext.Current.Server.MapPath("~/Files/") + fileToUpload.FileName;
10        fileToUpload.SaveAs(pathToSave);
11    }
12 
13    public bool IsReusable {
14        get {
15            return false;
16        }
17    }
18}

VB.NET CODE
01Imports System.Web
02 
03Public Class Handler
04 Implements IHttpHandler
05 
06 Public Sub ProcessRequest(context As HttpContext) Implements IHttpHandler.ProcessRequest
07  Dim fileToUpload As HttpPostedFile = context.Request.Files("Filedata")
08  Dim pathToSave As String = HttpContext.Current.Server.MapPath("~/Files/") & fileToUpload.FileName
09  fileToUpload.SaveAs(pathToSave)
10 End Sub
11 
12 Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
13  Get
14   Return False
15  End Get
16 End Property
17End Class

Build and run the application.

Upload multiple Files Asynchronously With Jquery Uploadify in asp.net

Download Sample Code

Unknown

4 comments:

  1. Anonymous9 November 2012 at 22:37

    thank u very much

    ReplyDelete
  2. Anonymous21 November 2012 at 02:44

    It doesn't work in IE9 for me, when I click 'Select File(s)' button nothing happens. In other browsers works fine

    ReplyDelete
  3. Ranadheer khyatam9 November 2015 at 10:20

    Thanks. Nice
    http://www.coding-issues.com/2015/11/upload-file-asynchronously-using-jquery.html

    ReplyDelete
  4. ranadheerrannu9 November 2015 at 23:57

    Thanks,
    http://dotnetawesome.blogspot.com/2014/10/how-to-upload-files-asynchronously-using-aspnet-mvc4-application.html

    ReplyDelete

Subscribe to: Post Comments (Atom)