Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Multiple File Upload with Progress Bar using jQuery in Asp.net

Jan 22, 2014
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.

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 RSS subscribe by email Subscribe by Email

12 comments :

shankar said...

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

.netFlash said...

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

suma said...

Thank u sir,can u send me the code for Video upload

๔єשz קเгคtє๔ said...

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!!

Unknown said...

an error occrred : Maximum request length exceeded. - pls help

Unknown said...

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

Unknown said...

Hi,

I need the filename of the particular image in server side.

Thanks in advance.

Anonymous said...

executing without any errors and displaying SELECT FILES button.But unfortunately it is not allowing to browse files to upload.

Unknown said...

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

Unknown said...

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

FastDeveloper said...

Its not working in Firefox. Working in Chrome only. Please tell me what to do.?

Soni Singh said...

I have download the source code but it's not working ...
Is there any other extra things which I have to add there??

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.