Uploading 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.
  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;  
  4.   
  5.             var data = new FormData();  
  6.             for (var i = 0; i < files.length; i++) {  
  7.                 data.append(files[i].name, files[i]);  
  8.             }  
  9.   
  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.             });  
  21.   
  22.             evt.preventDefault();  
  23.         });  
FileUploadHandler.ashx
  1. <%@ WebHandler Language="C#" Class="FileUploadHandler" %>    
  2.      
  3. using System;    
  4. using System.Web;    
  5.      
  6. public class FileUploadHandler : IHttpHandler  
  7. {    
  8.      
  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.         }    
  23.      
  24.     }    
  25.      
  26.     public bool IsReusable  
  27.     {    
  28.         get   
  29.         {    
  30.             return false;    
  31.         }    
  32.     }    
  33.      
  34. }  
Output
 
file upload
 
 Reference:  Asynchronous file upload using jquery in ASP.NET.