Uploading Files using JQuery Ajax in ASP.NET

In this blog you will learn how to upload files using JQuery Ajax in ASP.NET.

One of the very common task in web application is allowing user to upload files from the client machine to Server. usually files are uploaded along with a form submission. But using JQuery and Ajax we can accomplish this task without the entire page post back.In such cases, you can allow a user to select files using the FileUpload server control of ASP.NET and then upload those files to the server through an Ajax request to a generic handler.

Requirement

1. Web form
2. JQuery
3. Generic handler

Web form

 

The following web form consists of a file upload control,user can select the file using file upload control and then they click the upload button to upload the selected file to server.

<h3>Upload File using Jquery AJAX in Asp.net</h3>
    <table>
        <tr>
        <td>File:</td>
        <td>
            <asp:FileUpload ID="fupload" runat="server"  onchange='prvimg.UpdatePreview(this)' /></td>
        <td><asp:Image ID="imgprv" runat="server" Height="90px" Width="75px"  /></td>
        </tr>
        <tr>
        <td></td>
        <td><asp:Button ID="btnUpload" runat="server" cssClass="button" Text="Upload Selected File" /></td>
        </tr>
    </table>

JQuery

$("#btnUpload").click(function (evt) {
            var fileUpload = $("#fupload").get(0);
            var files = fileUpload.files;

            var data = new FormData();
            for (var i = 0; i < files.length; i++) {
                data.append(files[i].name, files[i]);
            }

            $.ajax({
                url: "FileUploadHandler.ashx",
                type: "POST",
                data: data,
                contentType: false,
                processData: false,
                success: function (result) { alert(result); },
                error: function (err) {
                    alert(err.statusText)
                }
            });

            evt.preventDefault();
        });

FileUploadHandler.ashx

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

using System;
using System.Web;

public class FileUploadHandler : IHttpHandler
{

    public void ProcessRequest (HttpContext context)
    {
        if (context.Request.Files.Count > 0)
        {
            HttpFileCollection files = context.Request.Files;
            for (int i = 0; i < files.Count; i++)
            {
                HttpPostedFile file = files[i];
                string fname = context.Server.MapPath("~/uploads/" + file.FileName);
                file.SaveAs(fname);
            }
            context.Response.ContentType = "text/plain";
            context.Response.Write("File Uploaded Successfully!");
        }

    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

}

Output

 

 

 Reference:  Asynchronous file upload using jquery in ASP.NET.