AspBucket offers ASP.NET, C#, VB, Jquery, CSS, Ajax, SQL tutorials. It is the best place for programmers to learn

Sunday 6 December 2015

File upload using jquery in

Here i am going to give example how to use upload files using ajax & jquery in 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

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);
              context.Response.ContentType = "application/json";
      public bool IsReusable
              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
or you can download zip directly


  1. Nice article Its working for me!!!!!

  2. works great! thanks for teaching, it is really appreciated

  3. I Love you!!! you save mi life !!! thanks soooooo much !!

  4. Hi, I applied everything you showed in your article to my project but nothing happened. The Upload folder is empty.

  5. Very useful, thank you for sharing your experience :D!!!


  • Popular Posts
  • Comments