Posts Tagged ‘Ajax file upload using jQuery ASP.NET C#’

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: 58 Comments »