1. Home
2. csharp
3. How to upload multiple files at once using the ASP.NET File Upload control & jQuery's uploadify

How to upload multiple files at once using the ASP.NET File Upload control & jQuery's uploadify

Category > CSHARP || Published on : Thursday, September 25, 2014 || Views: 16970 || ASP.NET File Upload control jQuery's uploadify plugin

---

In this post, I will show, how to upload multiple files at once using the ASP.NET File Upload control and jQuery's uploadify plugin.

Step 1: Download the Uploadify plugin from http://www.uploadify.com/download/

Step 2: Create a uploadify folder on the root of the application and then Copy the uploadify.css, uploadify.min.js and uploadify.swf to that folders.

Step 3: Add the CSS, jquery and uploadfiy js file specify the file types that can be uploaded using the "fileExt" parameter. Also, I have assigned paths to the swf and a handler. The handler is the file that will handle the request unlike the usual way of performing file uploads within the code behind file

"uploadify/uploadify.css" />

Here's the complete source code for the aspx page.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

"http://www.w3.org/1999/xhtml">"Head1" runat="server"> "uploadify/uploadify.css" />

"form1" runat="server">

Step 4: Add a new Hanlder from the Add a new item from the menu. Name it as "FileHandler.ashx" and save at the root of the web application. The Handler basically gets the files uploaded and the saves it to a specified folder. In this instance, I am saving it to the UserFiles folder within the application. Make sure you have already created the folder with the correct permissions (read / write attributes). Here's the source code for the handler.

Below is complete code for Handler

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

using System;
using System.Web;

public class FileHandler : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        HttpPostedFile uploadFiles = context.Request.Files["Filedata"];
        string pathToSave = HttpContext.Current.Server.MapPath("~/UserFiles/") + uploadFiles.FileName;
        uploadFiles.SaveAs(pathToSave);
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

after writing the complete codes, Press F5 from the Visual Studio to run the application, When the page is run, I will show a upload control on the page, now we can upload multiple files from here. I also show upload progress while uploading the files to the respective folders.

Note:
Download jQuery:- http://jquery.com/download/
Download Uploadify - http://www.uploadify.com/download/

 

Download Source Codes

---

You might also like