Introduction:
Here
I will explain how to upload multiple files with progress bar using JQuery uploadify plugin in asp.net.
Description:
In previous article I explained 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 in asp.net using uploadify plugin in JQuery.
In previous article I explained 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 in asp.net using uploadify plugin in JQuery.
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
|
|||
12 comments :
i have asp.net application i used export to excel it is working in web browser(pc) but it is not supporting in mobile browser please tell how to rectify this problem
Hai sir, Can i upload other type of Files not only image files..? it may be with extension how can i do that .can u please help me..
Thank u sir,can u send me the code for Video upload
Hi brother,
I AM DOING A PROJECT ABOUT STUDENT RESULTS AUTO SEND TO MAIL AND SMS..
I WANT THE CODING TO SEND BULK MAIL TO STUDENT DATABASE ON SINGLE CLICK ..
PLEASE HELP!!!
TANX IN ADVANCE!!
an error occrred : Maximum request length exceeded. - pls help
Hi sir,
I need to store the images in a particular folder.If that folder already exists save the images in that folder else create folder and save the images in that folder(created folder).
Thanks,
Abhishek
Hi,
I need the filename of the particular image in server side.
Thanks in advance.
executing without any errors and displaying SELECT FILES button.But unfortunately it is not allowing to browse files to upload.
Above program not working in .net framework 3.5. Please tell me any other possible way for selecting multiple file in fileuploader in framework 3.5
Hello Sir,
Its Working Well for me. But how i will able to access all uploaded files in aspx.cs file because i have to insert
all files in database on button Click..
Its not working in Firefox. Working in Chrome only. Please tell me what to do.?
I have download the source code but it's not working ...
Is there any other extra things which I have to add there??
Note: Only a member of this blog may post a comment.