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

jQuery Uploading Multiple Files using Asp.net with Uploadify Plugin

Dec 19, 2012
Introduction:

Here I will explain how to upload multiple files in asp.net using uploadify plugin in JQuery.

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

32 comments :

Unknown said...

nothing will happen your demo

Anonymous said...

Hi sir, your site is very helpful.

How to send automatic emails based on schedule i.e once in a week/once in two weeks / once in a month??
i have a column in a table for defining schedule. if the schedule is "Once in week" then mails should be sent automatically once in a week, or if the schedule is "Once in two weeks" then mails should be sent once in two weeks,or if the schedule is "Once in a month" then mail should be sent once in a month.
please give me best idea or code for schedule emails.

Thank you.

Unknown said...

your fileupload is not working in mozilaFirefox...

Suresh Dasari said...

@Suraj singh bhati...it will work i hope you need to update your flash player...

Anonymous said...

hi m saranya , ur blog useful for me,superb ,i can easily understand ..

using jquery concept
(script file its missing)

that link i can't found where is it ...can u reply me soon its useful for me ..thanks.........

Suresh Dasari said...

you can get those files from attached sample or the uploadify plugin link which was provided above. please check it

Abhinavsingh993 said...

Sir as usual your work is tremendous and very helpful to me Sir, can you please guide me My final B.Tech Project is a Website which is a combination of both Gmail(mailing website ) and Facebook type website now I required help on HOW TO RECIEVE MAILS AND WHICH EMAIL SERVER IS PREFERABLE ACCORDING TO YOU TO HOST MY WEBSITE AND HOW TO DO CHAT IF YOU ALLOW ME I CAN SEND YOU MY OWN CHAT CODE WHICH I RENDER FROM MY SENIOR AND HOW TO CREATE A COMMENT LIKE PAGE OF FACEBOOK I CREATED ONE WHERE I CAN UPDATE MY STATUS BUT HOW TO ALLOW COMMENT ON IT

Anonymous said...

Error:

It is an error to use a section registered as allowDefinition='MachineToApplication' beyond application level. This error can be caused by a virtual directory not being configured as an application in IIS.

Unknown said...

sir how to upload videos pls tell

Anonymous said...

Sir,
It is not working in internet explorer 9...However i tried it on chrome ..it is running good.

Can it be made to work with IE also?

Anonymous said...

Not working online (HTTP ERROR 500)

Anonymous said...

I have problem in file upload control.
how to 1GB file upload Server side in asp.net.could u help me

KKL said...

sir its not working could u give me any other tutorial same as it???

KKL said...

Object reference not set to an instance of an object.
show error in this line
string pathToSave = HttpContext.Current.Server.MapPath("~/UploadFiles/") + uploadFiles.FileName;

Anonymous said...

i tried it bt its nt wrking.....!!!!!

ชิดขอบจอ said...

It very nice.
How i do insert to databse and show image in page?

Anonymous said...

Thanks sir , it is working fine.

sairam said...

this is not working in my site which is having master pages.

Aquib said...

If we have fileupload inside the ajax modalpopupextender it was not initialized Can u please explain me why

Anonymous said...

Not Working in IE9.
Please Help

Vikas Shukla said...

how to keep files(progress bar status) that have completed uploading in the queue.........progress bar get disaapear after uploading a file.. i want to keep tht progress bar and show it to user..

any solution for that..plz help..

Anonymous said...

thanks for this - have you been able to get the onCancel event working when auto is true? This would seem important as we need to delete files if the user chooses to cancel them after auto uploading.

DotNet said...

FILEEXT IS ERROR ANY FILE CAN BE UPLOADED USE FILETYPEEXTS

Vikas Shukla said...

thanks for this - have you been able to get the onCancel event working when auto is true? This would seem important as we need to delete files if the user chooses to cancel them after auto uploading.

---

the progress bar will not get disappear if you use ;' 'removeCompleted' : false, "(an uploadify tool) if "true" it will get disappear...

Naresh@ said...

Its not working in IE 9. CaN U PLS MAKE IT WORKING IN ie 9 ALSO

abhishek said...

Where can i get (HttpPostedFile uploadFiles = context.Request.Files["Filedata"];)

"Filedata" Please tell me any one

Daban.Sallah said...

Hi this is very useful but i wonder how can i save files path to database in this generic handler

anupthinks said...

1) Suresh Ji, Could you also add in the Cancel button feature in it for each single Upload or Clear all at a time.
It would be of Great help.

2) If I change the File Extension to *.txt; , will i be able to upload ant text file?

Thank You

Nityanand Yadav said...

Hi Suresh i want to know that will it support if i open this page on my mobile?? please help me,.

Nityanand Yadav said...

when i open my website on phone it is not working .

Anonymous said...

it is a create article. If I like to add change the padding or position of file list. Would you help me how to do it. Thanks in advance.

Anonymous said...

i just want to how to delete old image nd put new image

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.