Introduction:
Here
I will explain how to upload multiple files asynchronously with jQuery uploadify plugin in asp.net or asynchronous upload multiple files with progress bar using jQuery uploadify plugin in asp.net.
Description:
In previous article I explained jQuery upload files using jQuery with hanlder file in asp.net, jQuery lightbox image slideshow, Generate thumbnail from images, Generate thumbnails from YouTube videos using JQuery, jQuery password strength examples and many articles relating to JQuery, asp.net, SQL Server etc. Now I will explain how to upload multiple files asynchronously with jQuery uploadify plugin in asp.net.
In previous article I explained jQuery upload files using jQuery with hanlder file in asp.net, jQuery lightbox image slideshow, Generate thumbnail from images, Generate thumbnails from YouTube videos using JQuery, jQuery password strength examples and many articles relating to JQuery, asp.net, SQL Server etc. Now I will explain how to upload multiple files asynchronously with jQuery uploadify plugin in asp.net.
We
can implement this concept by using uploadify plugin with few simple steps for that first
create new web application >> Right
click on your application >>
Select Add New Folder and Give name
as UploadFiles.
After
completion of folder creation write the following code in your aspx page
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery Upload multiple files in asp.net</title>
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<link href="uploadify.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.uploadify.js"
type="text/javascript"></script>
<script type="text/javascript">
$(function()
{
$("#file_upload").uploadify({
'swf': 'uploadify.swf',
'uploader': 'Handler.ashx',
'cancelImg': 'cancel.png',
'buttonText': 'Select Files',
'fileDesc': 'Image Files',
'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
'multi': true,
'auto': true
});
})
</script>
</head>
<body>
<form id="form1"
runat="server">
<div>
<asp:FileUpload ID="file_upload"
runat="server"
/>
</div>
</form>
</body>
</html>
|
If you observe above code in header section I added
some of css and script files those files you can get it from attached folder or
you can get it from here uploadify
plugin and if you observe in uploadify function I used Handler.ashx in this we
will write the code to upload files in folder for that Right click on your
application >> Select Add New Item >> Select Generic
Handler file and Give name as Handler.ashx >>
Click OK
Open Handler.ashx file and write the
following code
C#
Code
<%@ WebHandler Language="C#"
Class="Handler"
%>
using System.Web;
public class Handler : IHttpHandler
{
public void
ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
HttpPostedFile uploadFiles = context.Request.Files["Filedata"];
string pathToSave = HttpContext.Current.Server.MapPath("~/UploadFiles/") +
uploadFiles.FileName;
uploadFiles.SaveAs(pathToSave);
}
public bool
IsReusable {
get {
return false;
}
}
}
|
VB.NET Code
Imports System.Web
Public Class
Handler2 : Implements IHttpHandler
Public Sub
ProcessRequest(ByVal context As HttpContext) Implements
IHttpHandler.ProcessRequest
context.Response.ContentType = "text/plain"
Dim uploadFiles As
HttpPostedFile = context.Request.Files("Filedata")
Dim pathToSave As String = HttpContext.Current.Server.MapPath("~/UploadFiles/") &
uploadFiles.FileName
uploadFiles.SaveAs(pathToSave)
End Sub
Public ReadOnly Property IsReusable() As
Boolean Implements
IHttpHandler.IsReusable
Get
Return False
End Get
End Property
End Class
|
Demo
 |
Download sample code
attached
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
3 comments :
It is not working
Thanks for your article but how can I display the uploaded image to the page immediate after uploading. Please help.
Hi Suresh,
This is working for me, but i need some changes in this if possible please let me know.
I want to save these files into sql server db, and different file extensions like .pdf, .txt, .doc etc.,
and i want to upload many files so that i need no limit on file size limit,
and is there any problem with this script or flash in future if this doesn't exist.
I am trying to close this issue from the last 8 days
Thank you Suresh
Regards
Rajkumar P
Note: Only a member of this blog may post a comment.