My Professional Profile

I am Johnson Augustine Sr.Software Engineer and System Architect. I have 10 Yrs of hands on expertise in MVC 5 , Angular 5 , C# MVC Razor, WPF MVVM , Android , IOS Swift 3 , IOS11 MSSQL,MySQL Database,,PHP,C/C++/Visual C++/G++/QT++,Com,DirectX,Open CV,EMGU CV , embedded System Development , [Raspberry PI]. ,html,Javascript,Jquery,Ajax.CSS , Networking ,Cyber security, Ethical Hacking You can see my professional profile at Email :

Sunday, 5 May 2013

Ajax File upload with progress using ajax tool kit

In ASPX File
// You have to download and reffer ajax tool kit

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

<!DOCTYPE html>

<html xmlns="">
<head runat="server">

     <script type="text/javascript">

         function onClientUploadComplete(sender, e) {
             var id = e.get_fileId();
             onImageValidated("TRUE", e);

         function onImageValidated(arg, context) {

             var test = document.getElementById("testuploaded");
    = 'block';

             var fileList = document.getElementById("fileList");
             var item = document.createElement('div');
    = '4px';

             if (arg == "TRUE") {
                 var url = context.get_postedUrl();
                 url = url.replace('&amp;', '&');
                 item.appendChild(createThumbnail(context, url));
             } else {



         function createFileInfo(e) {
             var holder = document.createElement('div');
             holder.appendChild(document.createTextNode(e.get_fileName() + ' with size ' + e.get_fileSize() + ' bytes'));

             return holder;

         function createThumbnail(e, url) {
             var holder = document.createElement('div');
             var img = document.createElement("img");
    = '80px';
    = '80px';
             img.setAttribute("src", url);


             return holder;
    <form id="form1" runat="server">
        <ajaxToolkit:ToolkitScriptManager runat="Server" EnablePartialRendering="true" ID="ScriptManager1" />
    <div class="demoarea">
        <div class="demoheading">
            AjaxFileUpload Demonstration</div>
        Click <i>Select File</i> to select an image file to upload. You can upload a maximum
        of 10 jpeg files (files with the .jpg or .jpeg extension)
        <br />
        <asp:Label runat="server" ID="myThrobber" Style="display: none;"><img align="absmiddle" alt="" src="uploading.gif"/></asp:Label>
        <ajaxToolkit:AjaxFileUpload ID="AjaxFileUpload1" runat="server" Padding-Bottom="4"
            Padding-Left="2" Padding-Right="1" Padding-Top="4" ThrobberID="myThrobber" OnClientUploadComplete="onClientUploadComplete"
            OnUploadComplete="AjaxFileUpload1_OnUploadComplete" MaximumNumberOfFiles="10"
            AllowedFileTypes="jpg,jpeg" />
        <br />
        <div id="testuploaded" style="display: none; padding: 4px; border: gray 1px solid;">
                list of uploaded files:</h4>
            <hr />
            <div id="fileList">
    <div class="demobottom">

In C# Code behind

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using AjaxControlToolkit;
public partial class _Default : System.Web.UI.Page
    protected void Page_Load(object sender, EventArgs e)

    protected void AjaxFileUpload1_OnUploadComplete(object sender, AjaxFileUploadEventArgs file)
     // your code here to save the file after upload

No comments:

Post a Comment

Note: only a member of this blog may post a comment.