posted by  on  

To upload file in asp.net we have to use Genric handler(ASHX) in asp.net using c# and jQuery AJAX call, which will make it easy to upload n number of files.

Here we have an example which will help you to understand that how to upload multiple single files in asp.net using jQuery AJAX call.

Step – 1:

Create a new web application and open Default.aspx page and write/paste the following code.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>uploading file using jquery with generic handler ashx</title>
    <script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>

    <%-- jQuery AJAX Call --%>
    <script type="text/javascript">
        $(function () {
            $('#btnUploadFile').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: "UploadFileHandler.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>
    <form id="form1" runat="server">
        <div>
            <input type="file" id="FileUpload1" />
            <input type="button" id="btnUploadFile" value="Upload Files" />
        </div>
    </form>
</body>
</html>

If you observe we have mentioned "UploadHandler.ashx" in jQuery AJAX call ('$(function (){$('#btnUpload').click()').

We will use UploadHandler.ashx to upload files on server side.

Step – 2:

Now add handler file in your application by following below steps

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

GenericHandler

Now run your application that will work perfectly, if for you didn’t do any mistake during application development. To upload files in upload folder click on Choose file button and click on Upload files.

AfterGenericHandler

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

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;

namespace UploadFile
{
    /// <summary>
    /// Summary description for UploadFileHandler
    /// </summary>
    public class UploadFileHandler : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            //context.Response.ContentType = "text/plain";
            //context.Response.Write("Hello World");
            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;
            }
        }
    }
}

Now run your application that will work perfectly, if for you didn’t do any mistake during application development. To upload files in upload folder click on Choose file button and click on Upload files.

If It shows you that File Uploaded Successfully and if you will not find it in your folder(Uploads) just click on the following button, because it is not in our project.

 

AfterSuccessfulUpload

Lateshtclick Technology Blog
Tags Asp.net C# Ajax
posted by Latesht Click Latesht Click

Comments


Leave a Reply

Feel free to contribute!
Comment:
Name*:
Email*: