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

3 Comments | 10282 Views | Post by: Admin | Tags: 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.


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">
"FU1" 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.

You can donwload the complete running codes Visual Studio solution at the below. simply download and extract and run the application

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

 

Download Source Codes


Post Comments

if you have some suggestion, question, request on How to upload multiple files at once using the ASP.NET File Upload control & jQuery's uploadify.

Please use the comment box to express your views.

 

Comments:

loading...