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.
  1. <h3>Upload File using Jquery AJAX in Asp.net</h3>
  2. <table>
  3. <tr>
  4. <td>File:</td>
  5. <td>
  6. <asp:FileUpload ID="fupload" runat="server" onchange='prvimg.UpdatePreview(this)' /></td>
  7. <td><asp:Image ID="imgprv" runat="server" Height="90px" Width="75px" /></td>
  8. </tr>
  9. <tr>
  10. <td></td>
  11. <td><asp:Button ID="btnUpload" runat="server" cssClass="button" Text="Upload Selected File" /></td>
  12. </tr>
  13. </table>
JQuery
  1. $("#btnUpload").click(function (evt) {
  2. var fileUpload = $("#fupload").get(0);
  3. var files = fileUpload.files;
  5. var data = new FormData();
  6. for (var i = 0; i < files.length; i++) {
  7. data.append(files[i].name, files[i]);
  8. }
  10. $.ajax({
  11. url: "FileUploadHandler.ashx",
  12. type: "POST",
  13. data: data,
  14. contentType: false,
  15. processData: false,
  16. success: function (result) { alert(result); },
  17. error: function (err) {
  18. alert(err.statusText)
  19. }
  20. });
  22. evt.preventDefault();
  23. });
FileUploadHandler.ashx
  1. <%@ WebHandler Language="C#" Class="FileUploadHandler" %>
  3. using System;
  4. using System.Web;
  6. public class FileUploadHandler : IHttpHandler
  7. {
  9. public void ProcessRequest (HttpContext context)
  10. {
  11. if (context.Request.Files.Count > 0)
  12. {
  13. HttpFileCollection files = context.Request.Files;
  14. for (int i = 0; i < files.Count; i++)
  15. {
  16. HttpPostedFile file = files[i];
  17. string fname = context.Server.MapPath("~/uploads/" + file.FileName);
  18. file.SaveAs(fname);
  19. }
  20. context.Response.ContentType = "text/plain";
  21. context.Response.Write("File Uploaded Successfully!");
  22. }
  24. }
  26. public bool IsReusable
  27. {
  28. get
  29. {
  30. return false;
  31. }
  32. }
  34. }
Output
file upload
Reference: Asynchronous file upload using jquery in ASP.NET.