Ajax file upload using jQuery, ASP.NET & C#

January 8th, 2009 admin

 

This plugin allows users to easily upload multiple files without refreshing the page.

 

Ajax file upload plugin allows users to easily upload multiple files without refreshing the page. In addition, you can use any element to show file selection window.

Demo

View an usage examples with various options. This is a PHP version,

Download

Latest version – 0.6 (8 December 2008) Fixed bug in the “disable” method. Full (7KB) Minified (3KB)

How to use?

Dependencies

Plugin requires jQuery 1.2 or above.

Creating ASPX Page

 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Demo Page</title>
    <script type="text/javascript" src="Scripts/jquery-1.2.6.min.js"></script>
    <script type="text/javascript" src="Scripts/jquery.ajax_upload.0.6.min.js"></script>
<script type="text/javascript">/*<![CDATA[*/
$(document).ready(function(){
	var button = $('#button1'), interval;
	$.ajax_upload(button,{
		action: 'FileHandler.ashx',
		name: 'myfile',
		onSubmit : function(file, ext){
			// change button text, when user selects file
			button.text('Uploading');

			// If you want to allow uploading only 1 file at time,
			// you can disable upload button
			this.disable();

			// Uploding -> Uploading. -> Uploading...
			interval = window.setInterval(function(){
				var text = button.text();
				if (button.text().length < 13){
					button.text(button.text() + '.');
				} else {
					button.text('Uploading');
				}
			}, 200);
		},
		onComplete: function(file, response){
			button.text('Upload');

			// Although plugins emulates hover effect automatically,
			// it doens't work when button is disabled
			button.removeClass('hover');

			window.clearInterval(interval);

			// enable upload button
			this.enable();

			// add file to the list
			$('<li></li>').appendTo('#example1 .files').text(file);
		}
	});

});/*]]>*/</script>

</head>
<body>
    <form id="form1" runat="server">
<ul>
	<li id="example1" class="example">
		<p>You can style button as you want</p>
		<div class="wrapper">
			<div id="button1" class="button">Upload</div>
		</div>
		<p>Uploaded files:</p>
		<ol class="files"></ol>
	</li>
</ul>
    </form>
</body>
</html>

Server Side Code

If you look at javascript, I’m posting to HttpHandler called “FileHandler.ashx”. Here is the code

 

using System;
using System.Web;
using System.IO;

public class FileHandler : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        string strResponse = "error";
        try
        {

            string strFileName = Path.GetFileName(context.Request.Files[0].FileName);
            string strExtension = Path.GetExtension(context.Request.Files[0].FileName).ToLower();
            string strSaveLocation = context.Server.MapPath("Upload") + "\\" + strFileName;
            context.Request.Files[0].SaveAs(strSaveLocation);
            strResponse = "success";
        }
        catch
        {

        }

        context.Response.ContentType = "text/plain";
        context.Response.Write(strResponse);
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

}

jQueryDemo

Popularity: 100% [?]

Share
Posted in ASP.NET Tags:
«
»
You can leave a response, or trackback from your own site.

58 Responses to “Ajax file upload using jQuery, ASP.NET & C#”

  1. Karan says:
    July 20, 2011 at 6:52 am

    Can we have the c# code as well in the downloadable version. This will help many of us. Thanks for making this work.

  2. kiran says:
    September 10, 2011 at 8:08 am

    Nice article and I would like to implement the same with multiple images Can I know how to do that?

  3. Subhashini Janakiraman says:
    September 28, 2011 at 11:19 pm

    Iam very thankful to you for your post.I have been trying to write code from client side to upload files and your code is the one which fitted me best to refer.Your code is wonderful, very short and consistent.Really thankful.Keep sending posts.

  4. Bikesh says:
    October 28, 2011 at 5:07 pm

    Thanks for a great example it helped me a lot…

  5. kamal says:
    November 28, 2011 at 7:58 pm

    Hi, very nice post, can you help me how to get another parameter to send to handler,

    i need to insert this upload control to my repeater control and send row id to handler

    please advice

  6. andy says:
    December 7, 2011 at 11:24 pm

    works great in ie9 but in ie 8 it’s has error

    here the error said :

    Webpage error details

    User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; InfoPath.2)
    Timestamp: Thu, 8 Dec 2011 06:23:03 UTC

    Message: Unexpected call to method or property access.
    Line: 17
    Char: 29094
    Code: 0
    URI: http://myurl/myapp/jquery-1.6.2.min.js

  7. faizan says:
    December 23, 2011 at 6:35 am

    progress bar not work…..

  8. faizan says:
    December 23, 2011 at 6:36 am

    can anysend me complete code on my Id internee1@agilosoft.com…thx

« Older Comments

Leave a Reply