ASPForums.Net RSS Feedhttp://www.aspforums.net/Handlers/RSS.ashxLatest additions to the content that appears on ASPForums.Net(c) 2019 www.aspforums.com. All rights reserved.Upload File using MasterPage without Form Submit (PostBack) using jQuery AJAX in ASP.Net<p>Hi <a class="username" rel="CodeLava"> CodeLava</a>,</p> <p>Refer below sample.</p> <p><span style="text-decoration: underline;"><strong>HTML</strong></span></p> <p><strong>MasterPage.master</strong></p> <pre class="brush: html">&lt;%@ Master Language=&#34;C#&#34; AutoEventWireup=&#34;true&#34; CodeFile=&#34;MasterPage.master.cs&#34; Inherits=&#34;MasterPage&#34; %&gt; &lt;!DOCTYPE html PUBLIC &#34;-//W3C//DTD XHTML 1.0 Transitional//EN&#34; &#34;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&#34;&gt; &lt;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&gt; &lt;head runat=&#34;server&#34;&gt; &lt;title&gt;&lt;/title&gt; &lt;asp:ContentPlaceHolder ID=&#34;head&#34; runat=&#34;server&#34;&gt; &lt;/asp:ContentPlaceHolder&gt; &lt;/head&gt; &lt;body&gt; &lt;form id=&#34;form1&#34; runat=&#34;server&#34;&gt; &lt;div&gt; &lt;asp:ContentPlaceHolder ID=&#34;ContentPlaceHolder1&#34; runat=&#34;server&#34;&gt; &lt;/asp:ContentPlaceHolder&gt; &lt;/div&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt;</pre> <p><strong>CS.aspx</strong></p> <pre class="brush: html">&lt;%@ Page Title=&#34;&#34; Language=&#34;C#&#34; MasterPageFile=&#34;~/MasterPage.master&#34; AutoEventWireup=&#34;true&#34; CodeFile=&#34;Default.aspx.cs&#34; Inherits=&#34;_Default&#34; %&gt; &lt;asp:Content ID=&#34;Content1&#34; ContentPlaceHolderID=&#34;head&#34; runat=&#34;Server&#34;&gt; &lt;/asp:Content&gt; &lt;asp:Content ID=&#34;Content2&#34; ContentPlaceHolderID=&#34;ContentPlaceHolder1&#34; runat=&#34;Server&#34;&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; $(&#34;body&#34;).on(&#34;click&#34;, &#34;[id*=btnUpload]&#34;, function () { $.ajax({ url: &#39;HandlerCS.ashx&#39;, type: &#39;POST&#39;, data: new FormData($(&#39;form&#39;)[0]), cache: false, contentType: false, processData: false, success: function (file) { $(&#34;[id*=fileProgress]&#34;).hide(); $(&#34;[id*=lblMessage]&#34;).html(&#34;&lt;b&gt;&#34; + file.name + &#34;&lt;/b&gt; has been uploaded.&#34;); }, xhr: function () { var fileXhr = $.ajaxSettings.xhr(); if (fileXhr.upload) { $(&#34;progress&#34;).show(); fileXhr.upload.addEventListener(&#34;progress&#34;, function (e) { if (e.lengthComputable) { $(&#34;[id*=fileProgress]&#34;).attr({ value: e.loaded, max: e.total }); } }, false); } return fileXhr; } }); }); &lt;/script&gt; &lt;input type=&#34;file&#34; name=&#34;postedFile&#34; /&gt; &lt;input type=&#34;button&#34; id=&#34;btnUpload&#34; value=&#34;Upload&#34; /&gt; &lt;progress id=&#34;fileProgress&#34; style=&#34;display: none&#34;&gt;&lt;/progress&gt; &lt;hr /&gt; &lt;span id=&#34;lblMessage&#34; style=&#34;color: Green&#34;&gt;&lt;/span&gt; &lt;/asp:Content&gt;</pre> <p><span style="text-decoration: underline;"><strong>Code</strong></span></p> <p><strong>CS</strong></p> <p><strong>HandlerCS.ashx</strong></p> <pre class="brush: csharp">&lt;%@ WebHandler Language=&#34;C#&#34; Class=&#34;HandlerCS&#34; %&gt; 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 &gt; 0) { //Fetch the Uploaded File. HttpPostedFile postedFile = context.Request.Files[0]; //Set the Folder Path. string folderPath = context.Server.MapPath(&#34;~/Uploads/&#34;); //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( new { name = fileName }); context.Response.StatusCode = (int)HttpStatusCode.OK; context.Response.ContentType = &#34;text/json&#34;; context.Response.Write(json); context.Response.End(); } } public bool IsReusable { get { return false; } } }</pre> <p><strong>VB</strong></p> <p><strong>HandlerVB.ashx</strong></p> <pre class="brush: vb">&lt;%@ WebHandler Language=&#34;VB&#34; Class=&#34;HandlerVB&#34; %&gt; 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 &#39;Check if Request is to Upload the File. If context.Request.Files.Count &gt; 0 Then &#39;Fetch the Uploaded File. Dim postedFile As HttpPostedFile = context.Request.Files(0) &#39;Set the Folder Path. Dim folderPath As String = context.Server.MapPath(&#34;~/Uploads/&#34;) &#39;Set the File Name. Dim fileName As String = Path.GetFileName(postedFile.FileName) &#39;Save the File in Folder. postedFile.SaveAs(folderPath + fileName) &#39;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 = &#34;text/json&#34; context.Response.Write(json) context.Response.End() End If End Sub Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable Get Return False End Get End Property End Class</pre> <p><span style="text-decoration: underline;"><strong>Screenshot</strong></span></p> <p><img src="https://i.imgur.com/i9KyrfV.gif" alt="" width="372" height="183" /></p>https://www.aspforums.net:443/Threads/121676/Upload-File-using-MasterPage-without-Form-Submit-PostBack-using-jQuery-AJAX-in-ASPNet/https://www.aspforums.net:443/Threads/121676/Upload-File-using-MasterPage-without-Form-Submit-PostBack-using-jQuery-AJAX-in-ASPNet/Tue, 07 May 2019 00:34:39 GMT