In this article I will explain with an example, how to upload multiple files with Drag and Drop in HTML5 supported browsers using jQuery and AJAX in ASP.Net using C# and VB.Net.
Multiple files such as Image, PDF, Word, Excel, etc. and also large Music and Video files such as MP3 and MP4 will be easily uploaded by simple Drag and Drop of files in HTML5 supported browsers using jQuery and AJAX in ASP.Net.
This article makes use of the jQuery FileDrop plugin which makes use of Generic HTTP Handlers for uploading files with Drag and Drop using jQuery and AJAX in ASP.Net.
 
 
Generic HTTP Handler
Following is the Generic HTTP Handler which will handle the files sent from the AngularJS client for upload.
It first loops through the Request.Files collections and then inside the loop, each file is saved in the folder named Uploads.
Finally a success response is sent back to the jQuery client.
C#
<%@ WebHandler Language="C#" Class="Handler" %>
 
using System;
using System.Web;
using System.IO;
 
public class Handler : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        foreach (string key in context.Request.Files)
        {
            HttpPostedFile postedFile = context.Request.Files[key];
            string folderPath = context.Server.MapPath("~/Uploads/");
            if (!Directory.Exists(folderPath))
            {
                Directory.CreateDirectory(folderPath);
            }
            postedFile.SaveAs(folderPath + postedFile.FileName);
        }
        context.Response.StatusCode = 200;
        context.Response.ContentType = "text/plain";
        context.Response.Write("Success");
    }
 
    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}
 
VB.Net
<%@ WebHandler Language="VB" Class="Handler" %>
 
Imports System
Imports System.Web
Imports System.IO
Public Class Handler Implements IHttpHandler
   
    Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
        For Each key As String In context.Request.Files
            Dim postedFile As HttpPostedFile = context.Request.Files(key)
            Dim folderPath As String = context.Server.MapPath("~/Uploads/")
            If Not Directory.Exists(folderPath) Then
                Directory.CreateDirectory(folderPath)
            End If
            postedFile.SaveAs(folderPath + postedFile.FileName)
        Next
       
        context.Response.StatusCode = 200
        context.Response.ContentType = "text/plain"
        context.Response.Write("Success")
    End Sub
 
    Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
        Get
            Return False
        End Get
    End Property
 
End Class
 
 
Drag and Drop multiple File upload using jQuery AJAX in ASP.Net
The HTML Markup consists of two HTML DIV elements and a Button. One DIV will be the area for dropping files and the other will display the list of uploaded files.
Configuring the Plugin
The jQuery FileDrop plugin has been applied to the dropSection DIV and the Button ID is set into the fallback_id property of the jQuery FileDrop plugin.
 
Plugin properties
url – URL of the Generic Handler.
paramname – Name of the parameter which will contain the File data in Request.Form collection. Not required when Generic Handler is used.
maxfiles – Maximum number of simultaneous upload of Files.
maxfilesize – Maximum allowed File size in MB.
 
Plugin events
dragOver – Raised when File is dragged into the Drop section.
dragLeave – Raised when the File of dragged out of the Drop section.
drop – Raised when the File is dragged and dropped.
uploadFinished – Raised when the upload of a file is completed.
afterAll – Raised when upload of all files dragged together are completed.
 
Plugin validations
allowedfileextensions – Only the Files with the specified extension will be allowed to be uploaded.
allowedfiletypes – Only the Files with the specified MIME type (Content Type) will be allowed to be uploaded.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
       
        #dropSection
        {
            height: 300px;
            width: 600px;
            background-color: skyblue;
        }
       
        #btnUpload
        {
            display: none;
        }
       
        .active
        {
            background-color: yellow !important;
        }
    </style>
</head>
<body>
    <div id="dropSection">
    </div>
    <br />
    Uploaded Files:
    <hr />
    <div id="uploadedFiles">
    </div>
    <input type="button" id="btnUpload" value="Upload" />
    <script type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
    <script src="Scripts/filedrop.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#dropSection").filedrop({
                fallback_id: 'btnUpload',
                fallback_dropzoneClick: true,
                url: '<%=ResolveUrl("~/Handler.ashx")%>',
                //allowedfiletypes: ['image/jpeg', 'image/png', 'image/gif', 'application/pdf', 'application/doc'],
                allowedfileextensions: ['.doc', '.docx', '.pdf', '.jpg', '.jpeg', '.png', '.gif'],
                paramname: 'fileData',
                maxfiles: 5, //Maximum Number of Files allowed at a time.
                maxfilesize: 2, //Maximum File Size in MB.
                dragOver: function () {
                    $('#dropSection').addClass('active');
                },
                dragLeave: function () {
                    $('#dropSection').removeClass('active');
                },
                drop: function () {
                    $('#dropSection').removeClass('active');
                },
                uploadFinished: function (i, file, response, time) {
                    $('#uploadedFiles').append(file.name + '<br />')
                },
                afterAll: function (e) {
                    //To do some task after all uploads done.
                }
            })
        })
    </script>
</body>
</html>
 
 
Uploading Large files
In order to upload large files, you will need to set the following setting in the system.web section of the Web.Config file.
The executionTimeout value is set to 240 seconds while the maxRequestLength is set to the maximum size of the files in Bytes.
Note: These values can be changed as per your requirement.
 
<httpRuntime executionTimeout="240" maxRequestLength="1048576" />
 
 
Screenshot
Drag and Drop multiple File upload using jQuery AJAX in ASP.Net using C# and VB.Net
 
 
Downloads
Download Code