File upload using jquery in asp.net

Here i am going to give example how to use upload files using ajax & jquery in asp.net. Here I am using Jquery Plugin by Krajee is an advanced HTML 5 file input designed using Bootstrap 3.x CSS styles. It is a simple yet powerful file management tool and solution for web developers that utilizes HTML 5 and CSS 3 features (supported by most modern browsers).



In the following example we will learn how to implement simple drag & drop using Bootstrap and jquery and we will upload all the selected files to server asynchronously by using jquery ajax and genric handler.

Step 1 : Download Plugin from http://plugins.krajee.com/

Step 2: Give reference of js & css file in your project.

<script src="Scripts/jquery-1.9.1.min.js" type="text/javascript"><!--mce:0--></script>
<script src="Scripts/fileinput.js" type="text/javascript"><!--mce:1--></script>
<script src="Scripts/bootstrap.min.js" type="text/javascript"><!--mce:2--></script>
<script src="Scripts/fileinput_locale_LANG.js"><!--mce:3--></script>

Step 3: Add input type file in Default.aspx page.

<input id="file_BrandImage" type="file">

Step 4: Add a new generic handler and name it as FileUploadHandler.ashx

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 = "application/json";
              context.Response.Write("{}");
          }
 
      }
 
      public bool IsReusable
      {
          get
          {
              return false;
          }
      }
 
  }

Step 5: Add a new Folder Name "Uploads" in root directory.

It is preview of Image Upload Page.

It is preview of Image before Upload .
Attaching Project for reference.

GitHub reference https://github.com/shivam01990/Jquery-File-Upload
or you can download zip directly https://github.com/shivam01990/Jquery-File-Upload/archive/master.zip