How to Upload files Using JQuery Ajax in ASP.NET 5

Today I will explains to you how to upload files using JQuery Ajax in ASP.NET 5.

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

 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;    
        }    
    }    
}

Get Your Best ASP.NET 5 Hosting with DiscountService.biz