Validate and Upload (Save) multiple Files in Folder (Directory) using jQuery Ajax in ASP.Net

Hi SajidHussa,

Check this example. Now please take its reference and correct your code.

I have used Generic Handler to upload the files.

HTML

<input id="fileupload" type="file" name="postedFile" multiple="multiple" accept="image/jpg, image/jpeg, image/png" />
<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)
    {
        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)()

        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

Screenshot