Uploading Multiple files using JQuery in ASP.NET

Mukesh Kumar
May 13, 2012
28.2k
0
1
Article

Step 1: Open Visual Studio 2008/2010 and select -> File -> New -> Website > ASP.NET web site from the dialog and hit Ok.

Step 2: Download uploaded .Zip file from this article. Extract it and copy Scripts folder from extracted folder and paste it in your project.

Step 3 : Add these highlighted lines in the <head> section of your Default.aspx page as shown below:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Uplaoding Multiple Files</title>
    <script type="text/javascript" src="Scripts/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="Scripts/swfobject.js"></script>
    <script type="text/javascript" src="Scripts/jquery.uploadify.v2.1.4.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#UploadFiles').uploadify({
                'uploader': 'Scripts/uploadify.swf',
                'script': 'UploadFiles.aspx',
                'cancelImg': 'Scripts/cancel.png',
                'auto': 'true',
                'multi': 'true',
                'buttonText': 'Select Files',
                'queueSizeLimit': 500,
                'simUploadLimit': 2
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    </form>
</body>
</html>

Step 4: Add a line as shown below to the body section in the Default.aspx page.

<body>
    <form id="form1" runat="server">
    <div id="UploadFiles"></div>
    </form>
</body>

Step 5: Create another .aspx page and name it "UploadFiles.aspx". Replace code of your UploadFiles.aspx.cs file with the code given below:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;

public partial class UploadFiles : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        HttpPostedFile uploads = Request.Files["FileData"];
        string file = System.IO.Path.GetFileName(uploads.FileName);
        string Apath = Server.MapPath("~/") + "UploadedFiles";
        if (!Directory.Exists(Apath))
            Directory.CreateDirectory(Apath);
        string AppPath = Server.MapPath("~/");
        uploads.SaveAs(Apath + "\\" + file);
    }
}

Step 6 : Add this line in web.config file of your project under <system.web> section.

<system.web>