Uploading File using jQuery with Generic Handler ashx in Asp.net

By: Suresh Dasari Feb 1, 2015

Introduction:

Here I will explain how to upload files using jQuery with generic handler (ashx) in asp.net using c#, vb.net or upload file to server using jQuery in asp.net in c#, vb.net or asynchronous file upload in asp.net using jQuery, c#, vb.net.

Description:

In previous articles I explained jQuery call asp.net page methods from json, 7 + jQuery multiple fileupload plugin examples, jQuery check file size before upload in asp.net, jQuery setInterval() function example, jQuery upload multiple files using uplodify plugin in asp.net and many articles relating to jQuery, JavaScript and asp.net. Now I will explain how to upload files using jQuery with generic handler (ashx) in asp.net using c#, vb.net.

To upload files using jQuery with generic handler (ashx) in asp.net first create the new web application and open Default.aspx page and write the following code

<title>uploading file using jquery with generic handler ashx</title>

$(function () {

$('#btnUpload').click(function () {

var fileUpload = $("#FileUpload1").get(0);

var files = fileUpload.files;

var test = new FormData();

for (var i = 0; i < files.length; i++) {

test.append(files[i].name, files[i]);

}

$.ajax({

url: "UploadHandler.ashx",

type: "POST",

contentType: false,

processData: false,

data: test,

// dataType: "json",

success: function (result) {

alert(result);

},

error: function (err) {

alert(err.statusText);

}

});

})

</script>

</head>

<body>

<div>

</div>

</form>

</body>

</html>

If you observe jQuery ajax method in above code we mentioned “UploadHandler.ashx” by using this file we will upload files in server side. Now add handler file in your application by following below steps

Right click on your application à select Add New Item à select Generic Handler file à Give a name and click Add button like as shown below

Once you finished adding handler file now add new folder in your application “uploads” that would be like as shown below

Now open UploadHandler.ashx file and write the following code

C# Code

<%@ WebHandler Language="C#" Class="UploadHandler" %>

using System;

using System.Web;

using System.IO;

public class UploadHandler : IHttpHandler {

public void ProcessRequest (HttpContext context) {

if (context.Request.Files.Count > 0)

{

HttpFileCollection files = context.Request.Files;

for (int i = 0; i < files.Count; i++)

{

HttpPostedFile file = files[i];

string fname;

if (HttpContext.Current.Request.Browser.Browser.ToUpper() == "IE" || HttpContext.Current.Request.Browser.Browser.ToUpper() == "INTERNETEXPLORER")

{

string[] testfiles = file.FileName.Split(new char[] { '\\' });

fname = testfiles[testfiles.Length - 1];

}

else

{

fname = file.FileName;

}

fname=Path.Combine(context.Server.MapPath("~/uploads/"), fname);

file.SaveAs(fname);

}

context.Response.ContentType = "text/plain";

context.Response.Write("File Uploaded Successfully!");

}

public bool IsReusable {

get {

return false;

}

VB.NET Code

<%@ WebHandler Language="VB" Class="Handler" %>

Imports System.Web

Imports System.IO

Public Class Handler : Implements IHttpHandler

Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest

If context.Request.Files.Count > 0 Then

Dim files As HttpFileCollection = context.Request.Files

For i As Integer = 0 To files.Count - 1

Dim file As HttpPostedFile = files(i)

Dim fname As String

If HttpContext.Current.Request.Browser.Browser.ToUpper() = "IE" OrElse HttpContext.Current.Request.Browser.Browser.ToUpper() = "INTERNETEXPLORER" Then

Dim testfiles As String() = file.FileName.Split(New Char() {"\"c})

fname = testfiles(testfiles.Length - 1)

Else

fname = file.FileName

End If

fname = Path.Combine(context.Server.MapPath("~/uploads/"), fname)

file.SaveAs(fname)

context.Response.ContentType = "text/plain"

context.Response.Write("File Uploaded Successfully!")

End Sub

Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable

Get

Return False

End Get

End Property

End Class

Now run your application that will allow you to upload files in upload folder using handler files.

Demo

Download Sample 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

8 comments :

seth said...: formData is undefined.; July 13, 2015 at 1:01 AM
Unknown said...: Worked like a charm!
Thank you, Suresh, for sharing this!; July 28, 2015 at 6:43 PM
Unknown said...: Não funciona.; August 19, 2015 at 3:31 PM
Unknown said...: Hi, context.Request.Files.Count is always returning Zero.I don't know where i was wrong.; September 3, 2015 at 9:22 AM
Unknown said...: formData is undefined. error; April 22, 2016 at 2:47 AM
Anonymous said...: working perfect .. Thanks can we get guide for postman; November 5, 2016 at 10:20 PM
Unknown said...: Hi Suresh,

If I have to call the same hadler from the C# Code behind, how it will be. Could you please help on this
i tried the below but it is not sending file

const string FILE_PATH = "C:\\Docs\\SampleCV.csv";
const string FILE_NAME = "SampleCV";
string UPLOADER_URI = string.Format("http://testserver:82/ExportData.ashx?FILE_NAME={0}", FILE_NAME);

using (var stream = File.OpenRead(FILE_PATH))
{
var httpRequest = WebRequest.Create(UPLOADER_URI) as HttpWebRequest;
httpRequest.Method = "POST";
Stream webStream = null;
try
{
if (stream != null && stream.Length > 0)
{
long length = stream.Length;
httpRequest.ContentLength = length;
webStream = httpRequest.GetRequestStream();
stream.CopyTo(webStream, 32768);

}
}
finally
{
if (null != webStream)
{
webStream.Flush();
webStream.Close();
}
}
using (HttpWebResponse response = (HttpWebResponse)httpRequest.GetResponse())
{
StreamReader reader = new StreamReader(response.GetResponseStream());
var responseString = reader.ReadToEnd();
lblMsg.Text = "Posted to server. Response is : " + responseString; ;
}
}; March 15, 2017 at 6:42 AM
Joy Hanks said...: not working.; May 4, 2017 at 4:03 AM