My Professional Profile

I am Johnson Augustine Sr.Software Engineer and System Architect. I have 10 Yrs of hands on expertise in ASP.net 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 http://linkedin.com/in/johnsontaugustine Email : johnsonaugustine@live.com

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="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

     <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");
             test.style.display = 'block';

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

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

             fileList.appendChild(item);

         }

         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");
             img.style.width = '80px';
             img.style.height = '80px';
             img.setAttribute("src", url);

             holder.appendChild(createFileInfo(e));
             holder.appendChild(img);

             return holder;
         }
           </script>
</head>
<body>
    <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;">
            <h4>
                list of uploaded files:</h4>
            <hr />
            <div id="fileList">
            </div>
        </div>
       
    </div>
    <div class="demobottom">
    </div>
   
    </form>
</body>
</html>





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.