V24s

"Get Updates : Subscribe to our e-mail newsletter to receive updates........" "Good Luck frnds" Admission 2019 Application Form 2019 Colleges Entrance Exam 2019 Results 2019 Notification 2019 University Educational Jobs 2019 Government Jobs 2019

Search This Blog v24s guys

03 April, 2013

jQuery Uploading Multiple Files using Asp.net with Uploadify Plugin

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

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

No comments:

Popular Posts

Recent Posts

Google Analytics