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">
