This post describes the best way to upload numerous data files in ASP.NET Kinds using the jQuery and Generic Handler. Generally builders utilize the FileUpload Server management to add data files from the client device for the server that's rendered as as an Enter factor and set to file and helps you to pick out the file or various information. We can easily make use of the jQuery to help make an Ajax connect with towards the server and Submit the many picked documents for the Generic Handler as opposed to an entire webpage postback.

 


On this short article for creating the application, I am utilizing Visual Studio 2013 that has the framework 4.5.1. So, let us start with all the following course of action.

Creating WebForms

Step 1: Open Visual Studio and create the ASP.NET Web Application.

Step 2: Select the WebForms project template to proceed.

Visual Studio automatically creates the project and adds files and folders to the project by default.

Creating WebForm


Step 1: Just right-click on the project and add a new folder named "UploadedFiles".


Step 2: Just right-click on the project and add a new Web Form and replace the body content from the following content:

<form id="form1" runat="server">

    <h2>ASP.NET</h2>
    <p class="lead">Selcting Multiple Files using jQuery and Generic Handler</p>  

 

    <div class="form-group">
        <div>
            <asp:Label runat="server" AssociatedControlID="MultipleFilesUpload">Select Files</asp:Label>           
            <asp:FileUpload ID="MultipleFilesUpload" runat="server" AllowMultiple="true" />          

        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <asp:Button runat="server" ID="BtnUpload" Text="Upload Files" CssClass="btn btn-default" />
        </div>
    </div>  
 </form>


In the code above, I used the AllowMultiple property of FileUpload that is set to true. It is one of the HTML 5 features used in here.

Step 2: Now in the <head> section add the following code:

<script src="Scripts/jquery-1.10.2.js"></script>

<link href="Content/bootstrap.css" rel="stylesheet" />

<link href="Content/Site.css" rel="stylesheet" />

<script type="text/javascript">
    $(document).ready(function () {
        $("#BtnUpload").click(function (event) {
            var uploadfiles = $("#MultipleFilesUpload").get(0);
            var uploadedfiles = uploadfiles.files;
            var fromdata = new FormData();
            for (var i = 0; i < uploadedfiles.length; i++) {
                fromdata.append(uploadedfiles[i].name, uploadedfiles[i]);
            }
             var choice = {};
            choice.url = "UploadHandler.ashx";
            choice.type = "POST";
            choice.data = fromdata;
            choice.contentType = false;
            choice.processData = false;
            choice.success = function (result) { alert(result); };
            choice.error = function (err) { alert(err.statusText); };
            $.ajax(choice);
            event.preventDefault();
        });
    });
</script>

Via the code over, the data files are chosen inside the file upload handle working with the information residence of the DOM factor. the loop iterates by means of many of the information then calls the append() method of the FormData to incorporate the data files into the FormData item.

Now, the info is usually to be sent into the server. The £.ajax() is employed to transfer the information. The choice item supplies numerous options such as focus on URL and HTTP process. Now we have set the URL home on the GenericHandler file named UploadHandler.ashx . We now have established the contentType and processData home to phony with which the jQuery will not likely URL encode the info while sending into the server. The achievements and mistake properties are utilised to display the messages as a result of an warn.

Creating Generic Handler

Step 1: Add the Generic Handler by right-clicking on the project named UploadHandler.


Step 2: Modify the code with the following code:

namespace UploadMultipleFilesApp
{
    public class UploadHandler : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            if (context.Request.Files.Count > 0)
            {
                HttpFileCollection SelectedFiles = context.Request.Files;
                for (int i = 0; i < SelectedFiles.Count; i++)
                {
                    HttpPostedFile PostedFile = SelectedFiles[i];
                    string FileName = context.Server.MapPath("~/UploadedFiles/" + PostedFile.FileName);
                    PostedFile.SaveAs(FileName);                   
                }
            }
            else
            {
                context.Response.ContentType = "text/plain";
                context.Response.Write("Please Select Files");
            }
            context.Response.ContentType = "text/plain";
            context.Response.Write("Files Uploaded Successfully!!");
        }
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

In this article we will see which the information which might be posted to your server and will be accessed using the Ask for object. Each individual element in the HttpFileCollection is of type HttpPostedFile. FileName property is utilized to receive the file identify of posted file and return it and also the similar name id used to conserve the file.

Run WebForm

Now run the webform and choose the files as shown below that the files are selected.


After clicking on Upload Files, the message is generated.


Summary

This article explained the best way to choose numerous information and add them utilizing jQuery and Generic Handler in ASP.NET Web Forms. Joyful Coding and thanks for looking at.