Hi counterkin,
You need to pass as query string to the Handler.
Refer below modified code.
HTML
<asp:FileUpload ID="postedFile" runat="server" />
<asp:Button ID="btnUpload" runat="server" Text="Upload" />
<asp:Label ID="lbl_ID" runat="server" Text="50018"></asp:Label>
<div class="progress" style="display: none">
<div class="progress-bar" role="progressbar"></div>
</div>
<div id="lblMessage" style="color: Green"></div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript">
$("body").on("click", "[id*=btnUpload]", function () {
$.ajax({
url: 'Handler.ashx?Id=' + $("[id*=lbl_ID]").html(),
type: 'POST',
data: new FormData($('form')[0]),
cache: false,
contentType: false,
processData: false,
success: function (file) {
setTimeout(function () {
$(".progress").hide();
$("#lblMessage").html("<b>" + file.name + "</b> has been uploaded.");
}, 1000);
},
error: function (a) {
$("#lblMessage").html(a.responseText);
},
failure: function (a) {
$("#lblMessage").html(a.responseText);
},
xhr: function () {
var fileXhr = $.ajaxSettings.xhr();
if (fileXhr.upload) {
$(".progress").show();
fileXhr.upload.addEventListener("progress", function (e) {
if (e.lengthComputable) {
var percentage = Math.ceil(((e.loaded / e.total) * 100));
$('.progress-bar').text(percentage + '%');
$('.progress-bar').width(percentage + '%');
if (percentage == 100) {
$('.progress-bar').text('100%');
}
}
}, false);
}
return fileXhr;
}
});
});
</script>
Handler
C#
<%@ WebHandler Language="C#" Class="Handler" %>
using System;
using System.IO;
using System.Net;
using System.Web;
using System.Web.Script.Serialization;
public class Handler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
//Check if Request is to Upload the File.
if (context.Request.Files.Count > 0)
{
//Fetch the Label value.
string id = context.Request.QueryString["Id"];
//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(
new
{
name = fileName
});
context.Response.StatusCode = (int)HttpStatusCode.OK;
context.Response.ContentType = "text/json";
context.Response.Write(json);
context.Response.End();
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
VB.Net
<%@ WebHandler Language="VB" Class="Handler" %>
Imports System
Imports System.IO
Imports System.Net
Imports System.Web
Imports System.Web.Script.Serialization
Public Class Handler : 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 Label value.
Dim id As String = context.Request.QueryString("Id")
'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"
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
Screenshot