JQuery multiple files upload in asp.net and C# using Ajax form

In this article we will discuss about the files uploading in the asp.net. Asp.net provides the FileUpload control and you can use this with a small amount of code lines for uploading the documents. However there are many other ways to upload the files using the several jQuery,flash and Ajax plugins. In the following you can see a such a script that use the Ajax form plugin.

This script is well written and very useful, you can find here. In this article I will show how you can use this script with the asp.net and C#.

jQuery Multiple Files Upload

Firstly you need to write a handler. In ASP.NET you cant easily write a generic handler with the .ashx extension. You can add this in your project as:
Add ashx handler in asp.net

After adding the new handler (.ashx) with the name ‘Upload.ashx’ you can see the ProcessRequest method below that contains the code for saving the newly uploaded file in to the disk.

using System;
using System.Web;
using System.IO;
 
public class Upload : IHttpHandler {
 
    public void ProcessRequest (HttpContext context) {
 
        context.Response.ContentType = "text/plain";
        context.Response.Expires = -1;
        try
        {
            HttpPostedFile postedFile = context.Request.Files[0];         
            string savepath = "";
            string tempPath = "";
            tempPath = System.Configuration.ConfigurationManager.AppSettings["FolderPath"];
            savepath = context.Server.MapPath(tempPath);
            string filename = postedFile.FileName;
            if (!Directory.Exists(savepath))
			{
                Directory.CreateDirectory(savepath);
            }
            postedFile.SaveAs(savepath + @"\" + filename);
            context.Response.Write(tempPath + "/" + filename);
            context.Response.StatusCode = 200;
        }
        catch (Exception ex)
        {
            context.Response.Write("Error: " + ex.Message);
        }
    }

Below is the your html document that contains a div named ‘fileuploader’ that will handle the file uploads. See the JavaScript section and how to use that:

<html>
<head>
    <link href="uploadfile.min.css" rel="stylesheet">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="jquery.uploadfile.min.js"></script>
    <script>
        $(document).ready(function()
          {
	     $("#fileuploader").uploadFile({
	     url:"Upload.ashx",
	     fileName:"myfile"
	});
          });
</script>
</head>
<body>
    <div id="fileuploader">Upload</div>
 
</body>
</html>

Download the jquery.uploadfile.min.js

There are several options to customize this FileUpload plugin such as: multiple, showCancel, showAbort, showDone and showProgress. Let’s suppose if don’t want to show the drag and drop area then you can write the code as :

<script>
$(document).ready(function()
   {
       $("#fileuploader").uploadFile({
         url:"Upload.ashx",
	 fileName:"myfile",
         dragDrop: false
  });
});
</script>

One thought on “JQuery multiple files upload in asp.net and C# using Ajax form”