Select and Upload Multiple Files using JQuery with Gmail Style in ASP.NET :
1. Download the required Uploadify JQuery plugin and the JQuery Library using below links.
2. Start Visual Studio,create a new website shown below image and follow the steps.
uploader.swf :
It is a Flash files (.SWF files) .
These are currently the dominant format for displaying "animated" vector graphics on the web.
In the Editor, you can add Flash files using the Flash element.
jquery.uploadify :
Uploadify is a jQuery plugin that integrates a fully customizable multiple-file upload utility on your website.
It uses a mixture of JavaScript, ActionScript, and the server-side language of your choice to dynamically create an instance over any DOM element on a page.
Simultaneously upload multiple files.
uploader.fla :
Fully-skinnable Flash Source file (FLA) that enables browsing to a computer, selecting the file to be uploaded, initiating the upload and watching a progress meter, and completion.
3. Create one MyFileUpload.aspx page in your website and Inherit the following files you downloaded earlier in the head section of .aspx page.
<script
src="Scripts/jquery-1.3.2.min.js"
type="text/javascript"></script>
<script
src="Scripts/jquery.uploadify.js"
type="text/javascript"></script>
<link
href="CSS/uploadify.css"
rel="stylesheet"
type="text/css"
/>
Also Place the following script in the head section of the page.
<script
type
=
"text/javascript">
$(window).load(
function()
{
$("#<%=FileUpload1.ClientID%>").fileUpload({
'uploader':
'scripts/uploader.swf',
'cancelImg':
'images/cancel.png',
'buttonText':
'Browse
Files',
'script':
'Upload.ashx',
'folder':
'uploads',
'fileDesc':
'ALL
Files',
'fileExt':
'*.jpg;*.jpeg;*.gif;*.png;*.ODS;*.xlsx;*.txt',
'multi':
true,
'auto':
false
});
}
);
</script>
Below
screen shows the complete code file of MyFileUpload.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MyFileUpload.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></title>
<script src="Scripts/jquery-1.3.2.min.js"type="text/javascript"></script>
<script src="Scripts/jquery.uploadify.js" type="text/javascript"></script>
<link href="CSS/uploadify.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server" style = "padding:260px;padding-right:160px;">
<label id="lblheading" title=""><font size="10px" color="Blue" >How to upload multiple files using JQuery</font>
</label><br />
<br />
<a href="javascript:$('#<%=FileUpload1.ClientID%>').fileUploadStart()"><font color="Red" size="6px">StartUpload</font></a>
<a href="javascript:$('#<%=FileUpload1.ClientID%>').fileUploadClearQueue()">
<font color="Red"size="6px">Clear</font></a>
<div style = "padding:40px;" >
<asp:FileUpload ID="FileUpload1" runat="server" />
</div>
</form>
</body>
</html>
<script type = "text/javascript">
$(window).load(function () {
$("#<%=FileUpload1.ClientID%>").fileUpload({
'uploader': 'scripts/uploader.swf',
'cancelImg': 'images/cancel.png',
'buttonText': 'Browse Files',
'script': 'Upload.ashx',
'folder': 'uploads',
'fileDesc': 'ALL Files',
'fileExt': '*.jpg;*.jpeg;*.gif;*.png;*.ODS;*.xlsx;*.txt',
'multi': true,
'auto': false
});
}
);
</script>
Then we need FileUpload control handler file like Upload.ashx. which will handle the
FileUpload and save the uploaded files on to the disk.
Below is the code for the Upload.ashx file
<%@ WebHandler Language = "C#" Class="Upload" %>
using System;
using System.Web;
using System.IO;
public class Upload : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
context.Response.Expires = -1;
try
{
HttpPostedFile postedFile = context.Request.Files["Filedata"];
string savepath = "";
string tempPath = "";
tempPath = System.Configuration.ConfigurationManager.AppSettings["FolderPath"];
savepath = context.Server.MapPath(tempPath);
string filename = postedFile.FileName;
if (!Directory.Exists(savepath))
Directory.CreateDirectory(savepath);
postedFile.SaveAs(savepath + @"\" + filename);
context.Response.Write(tempPath + "/" + filename);
context.Response.StatusCode = 200;
}
catch (Exception ex)
{
context.Response.Write("Error: " + ex.Message);
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
the
handler simply accepts the posted files and saves the file in folder called
uploads inside the website
root
directory whose path is placed in an AppSettings key in the Web.Config file
Refer below
<appSettings>
<add key ="FolderPath" value ="uploads"/>
</appSettings >
After
adding this run the application then we display the below scrren
