Upload File using MasterPage without Form Submit (PostBack) using jQuery AJAX in ASP.Net

Last Reply one year ago By pandeyism

Posted one year ago

I got a solution from aspsnippets


Upload File without Form Submit (PostBack) using jQuery AJAX in ASP.Net

I'm trying to implement this in my masterpage but it's not working as it should. It's displaying "undefined has been uploaded" as my success message. Please help.

Posted one year ago

Hi CodeLava,

Refer below sample.



<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <asp:ContentPlaceHolder ID="head" runat="server">        
    <form id="form1" runat="server">
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">


<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"
    CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $("body").on("click", "[id*=btnUpload]", function () {
                url: 'HandlerCS.ashx',
                type: 'POST',
                data: new FormData($('form')[0]),
                cache: false,
                contentType: false,
                processData: false,
                success: function (file) {
                    $("[id*=lblMessage]").html("<b>" + file.name + "</b> has been uploaded.");
                xhr: function () {
                    var fileXhr = $.ajaxSettings.xhr();
                    if (fileXhr.upload) {
                        fileXhr.upload.addEventListener("progress", function (e) {
                            if (e.lengthComputable) {
                                    value: e.loaded,
                                    max: e.total
                        }, false);
                    return fileXhr;
    <input type="file" name="postedFile" />
    <input type="button" id="btnUpload" value="Upload" />
    <progress id="fileProgress" style="display: none"></progress>
    <hr />
    <span id="lblMessage" style="color: Green"></span>




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

using System;
using System.IO;
using System.Net;
using System.Web;
using System.Web.Script.Serialization;

public class HandlerCS : IHttpHandler

    public void ProcessRequest(HttpContext context)
        //Check if Request is to Upload the File.
        if (context.Request.Files.Count > 0)
            //Fetch the Uploaded File.
            HttpPostedFile postedFile = context.Request.Files[0];
            //Set the Folder Path.
            string folderPath = context.Server.MapPath("~/Uploads/");

            //Set the File Name.
            string fileName = Path.GetFileName(postedFile.FileName);
            //Save the File in Folder.
            postedFile.SaveAs(folderPath + fileName);

            //Send File details in a JSON Response.
            string json = new JavaScriptSerializer().Serialize(
                    name = fileName
            context.Response.StatusCode = (int)HttpStatusCode.OK;
            context.Response.ContentType = "text/json";

    public bool IsReusable
            return false;



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

Imports System
Imports System.IO
Imports System.Net
Imports System.Web
Imports System.Web.Script.Serialization

Public Class HandlerVB : Implements IHttpHandler
    Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
        'Check if Request is to Upload the File.
        If context.Request.Files.Count > 0 Then
            'Fetch the Uploaded File.
             Dim postedFile As HttpPostedFile = context.Request.Files(0)
            'Set the Folder Path.
            Dim folderPath As String = context.Server.MapPath("~/Uploads/")

            'Set the File Name.
            Dim fileName As String = Path.GetFileName(postedFile.FileName)
            'Save the File in Folder.
            postedFile.SaveAs(folderPath + fileName)
            'Send File details in a JSON Response.
            Dim json As String = New JavaScriptSerializer().Serialize(New With {
                .name = fileName
            context.Response.StatusCode = CInt(HttpStatusCode.OK)
            context.Response.ContentType = "text/json"
        End If
    End Sub
    Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
            Return False
        End Get
    End Property

End Class