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

   5 comments :

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

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

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

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

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

    ReplyDelete

  • Popular Posts
  • Comments