Pass (Send) FileUpload control and formdata to Generic Handler using C# and VB.Net in ASP.Net

Hi SajidHussa,

Check this sample. now take its reference and correct your code.

you can add name property in the textbox to retrieve the value in handler page using the Form Collection.

HTML

<input id="fileupload" type="file" name="postedFile" multiple="multiple" accept="image/jpg, image/jpeg, image/png" /><br />
<input id="txtItemCode" type="text" name="itemcode" />
<input type="button" id="btnUpload" value="Upload" /><hr />
<div id="dvPreview"></div><br />
<span id="lblMessage" style="color: Green;"></span>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
    $(function () {
        $("#fileupload").change(function () {
            var dvPreview = $("#dvPreview");
            dvPreview.html("");
            $("#lblMessage").html("");
            if ($(this)[0].files.length <= 4) {
                if (typeof (FileReader) != "undefined") {
                    var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.png)$/;
                    $($(this)[0].files).each(function () {
                        var file = $(this);
                        if (regex.test(file[0].name.toLowerCase())) {
                            var reader = new FileReader();
                            reader.onload = function (e) {
                                var img = $("<img />");
                                img.attr("style", "height:100px;width: 100px");
                                img.attr("src", e.target.result);
                                dvPreview.append(img);
                            }
                            reader.readAsDataURL(file[0]);
                        } else {
                            alert(file[0].name + " is not a valid image file.");
                            dvPreview.html("");
                            return false;
                        }
                    });
                } else {
                    alert("This browser does not support HTML5 FileReader.");
                }
            } else {
                alert('Please select only 4 files!');
                $(this).val(null);
            }
        });
        $("#btnUpload").on("click", function () {
            if ($("#fileupload")[0].files.length > 0) {
                $.ajax({
                    url: 'Handler.ashx',
                    type: 'POST',
                    data: new FormData($('form')[0]),
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function (file) {
                        var message = "";
                        for (var i = 0; i < file.length; i++) {
                            message += "<b>" + file[i] + "</b> has been uploaded.<br/>";
                        }
                        $("#lblMessage").html(message);
                    }
                });
            } else {
                alert('Please select a file!');
            }
        });
    });
</script>

Handler

C#

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

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

public class Handler : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        string itemCode = context.Request.Form["itemcode"];
        List<string> files = new List<string>();
        for (int i = 0; i < context.Request.Files.Count; i++)
        {
            HttpPostedFile postedFile = context.Request.Files[i];
            string folderPath = context.Server.MapPath("~/Uploads/");
            string fileName = Path.GetFileName(postedFile.FileName);
            postedFile.SaveAs(folderPath + fileName);
            files.Add(fileName);
        }

        string json = new JavaScriptSerializer().Serialize(files);
        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.Collections.Generic
Imports System.IO
Imports System.Net
Imports System.Web.Script.Serialization
Imports System.Web

Public Class Handler : Implements IHttpHandler
    
    Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
        Dim files As List(Of String) = New List(Of String)()
        Dim itemCode As String = context.Request.Form("itemcode")
        For i As Integer = 0 To context.Request.Files.Count - 1
            Dim postedFile As HttpPostedFile = context.Request.Files(i)
            Dim folderPath As String = context.Server.MapPath("~/Uploads/")
            Dim fileName As String = Path.GetFileName(postedFile.FileName)
            postedFile.SaveAs(folderPath & fileName)
            files.Add(fileName)
        Next

        Dim json As String = New JavaScriptSerializer().Serialize(files)
        context.Response.StatusCode = CInt(HttpStatusCode.OK)
        context.Response.ContentType = "text/json"
        context.Response.Write(json)
        context.Response.End()
    End Sub
 
    Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
        Get
            Return False
        End Get
    End Property

End Class