Async file upload with jquery and ASP.NET

1. Default.aspx

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="JuqeryFileUpload._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <script src="Scripts/ajaxfileupload.js" type="text/javascript"></script>
    <script src="Scripts/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        function ajaxFileUpload() {
            alert("I'm in.");
            $("#loading")
               .ajaxStart(function () {
                   $(this).show();
               })
               .ajaxComplete(function () {
                   $(this).hide();
               });

            $.ajax
               (
                   {
                       type: 'POST',
                       url: 'JuqeryFileUploadHandler.ashx',
                       contentType: "application/json; charset=utf-8",
                       secureuri: false,
                       fileElementId: 'fileToUpload',
                       dataType: 'json',
                       data: { name: 'logan', id: 'id' },
                       success: function (data, status) {
                           if (typeof (data.error) != 'undefined') {
                               if (data.error != '') {
                                   alert(data.error);
                               } else {
                                   alert(data.msg);
                               }
                           }
                       },
                       error: function (data, status, e) {
                           alert(e);
                       }
                   }
               )
            return false;
        }
    </script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <p>
        Upload your file Asynchronously</p>
    <div>
        <input id="fileToUpload" type="file" name="fileToUpload" class="input" />
        <button id="buttonUpload" onclick="return ajaxFileUpload();">
            Upload</button>
        <img id="loading" src="Images/loading.gif" style="display: none;" />
    </div>
</asp:Content>

2. JQueryFileUploadHandler.ashx.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.IO;

namespace JuqeryFileUpload

{

    /// <summary>

    /// Summary description for JuqeryFileUploadHandler

    /// </summary>

    public class JuqeryFileUploadHandler : IHttpHandler

    {

        public void ProcessRequest(HttpContext context)

        {

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

            {

                string path = context.Server.MapPath("~/Temp");

                if (!Directory.Exists(path))

                    Directory.CreateDirectory(path);

                var file = context.Request.Files[0];

                string fileName;

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

                {

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

                    fileName = files[files.Length - 1];

                }

                else

                {

                    fileName = file.FileName;

                }

                string strFileName = fileName;

                fileName = Path.Combine(path, fileName);

                file.SaveAs(fileName);

                string msg = "{";

                msg += string.Format("error:'{0}',\n", string.Empty);

                msg += string.Format("msg:'{0}'\n", strFileName);

                msg += "}";

                context.Response.Write(msg);

            }

        }

        public bool IsReusable

        {

            get

            {

                return true;

            }

        }

    }

}

3. jQuery references and Form tag in Site.Master page.

<script src="Scripts/ajaxfileupload.js" type="text/javascript"></script>

<script src="Scripts/jquery.js" type="text/javascript"></script>

<form id="Form1" method="post" runat="server" enctype="multipart/form-data">