|
|
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="Memba.WebControls.XP" Namespace="Memba.WebControls" TagPrefix="mbui" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Professional File Upload</title>
<style type="text/css">
<!--
.cssList
{
overflow:auto;
width:99.7%;
height:92px;
border:1px solid #0F0000;
background-color:white;
}
.cssItem
{
position:relative;
width:70px;
height:70px;
padding:5px;
margin:5px;
text-align:center;
border:1px solid white;
float:left;
}
.cssItemHover
{
position:relative;
width:70px;
height:70px;
padding:5px;
margin:5px;
text-align:center;
border:1px dotted black;
background-color:whitesmoke;
float:left;
}
.cssImage
{
border:0;
}
.cssText
{
font-family:Calibri, Arial, Helvetica, sans-serif;
font-size:10px;
white-space:normal;
}
.cssRemove
{
position:absolute;
top:64px;
left:64px;
z-index:10;
cursor:pointer;
}
.cssMultiUpload
{
white-space:nowrap;
text-decoration:none;
}
.cssMultiUploadHover
{
white-space:nowrap;
text-decoration:underline;
}
//-->
</style>
</head>
<body>
<form id="form1" runat="server" enctype="multipart/form-data">
<asp:ScriptManager ID="ScriptManager" runat="server">
<Scripts>
<asp:ScriptReference Path="~/scripts/Memba.Utils.js" />
</Scripts>
</asp:ScriptManager>
<!-- MultiUpload2 -->
<mbui:MultiUpload2 ID="MultiUpload" runat="server"
Text="Choose file..."
Width="100px"
CssClass="cssMultiUpload"
HoverCssClass="cssMultiUploadHover">
</mbui:MultiUpload2>
<!-- MultiUpload2 -->
<!-- ImageList -->
<mbui:ImageList ID="ImageList" runat="server"
CssClass="cssList"
ItemCssClass="cssItem"
ItemHoverCssClass="cssItemHover"
ImageCssClass="cssImage"
TextCssClass="cssText"
RemoveCssClass="cssRemove"
RemoveTooltip="Remove from selection"
LinesOfText="2"
Height="92px"
Width="420px"></mbui:ImageList>
<!-- ImageList -->
<input type="button" id="ClearButton" value="Clear" onclick="onClear();" />
<asp:Button ID="SubmitButton" runat="server" Text="Submit" OnClick="SubmitButton_Click" />
<br /><br />Trace:<br />
<textarea id="TraceConsole" cols="100" rows="20"></textarea>
</form>
<script type="text/javascript">
<!--
// Declare global variables for the various controls
var g_MultiUpload;
var g_ImageList;
//pageLoad function of ASP.NET Ajax Extensions framework
function pageLoad()
{
//Get a reference to the MultiUpload control and
//add en event handler for the browse event
g_MultiUpload = $find("<%= MultiUpload.ClientID %>");
if(g_MultiUpload)
g_MultiUpload.add_browse(onBrowse);
//Get a reference to the ImageList control and
//add en event handler for the browse event
g_ImageList = $find("<%= ImageList.ClientID %>");
if(g_ImageList)
g_ImageList.add_remove(onRemove);
}
//pageLoad function of ASP.NET Ajax Extensions framework
function pageUnload()
{
if(g_MultiUpload)
g_MultiUpload.remove_browse(onBrowse);
if(g_ImageList)
g_ImageList.remove_remove(onRemove);
}
//Event handler for the browse (click) event of the MultiUpload control
function onBrowse(sender, args)
{
if((g_ImageList) && (g_MultiUpload))
{
//Search for the item in the Imagelist
if (g_ImageList.find_item(args.get_value()).length > 0)
{
alert("file already in list");
//The item already exists, we can remove the duplicate INPUT in the MultiUpload control
g_MultiUpload.removeInput(args.get_id());
}
else
{
//Since the item is not found in the ImageList, create a new item
var item = new Memba.WebControls.ImageListItem(
Memba.Utils.newGuid(),
'<%= this.ResolveClientUrl("~/images/upload.gif") %>',
args.get_value(),
args.get_value(),
args.get_id()
);
//Add the new item to the ImageList
g_ImageList.add_item(item);
}
//We can do some tracing which will display in the TraceConsole textarea
Sys.Debug.trace(g_ImageList.get_count() + " files in image list, and " + g_MultiUpload.get_count() + " files in MultiUpload control");
}
}
//Event handler for the remove event of the ImageList control
function onRemove(sender, args)
{
if((g_ImageList) && (g_MultiUpload))
{
//Upon clicking the remove icon in the ImageList, remove the corresponding INPUT in the MultiUpload control
g_MultiUpload.removeInput(args.get_tag());
//We can do some tracing which will display in the TraceConsole textarea
Sys.Debug.trace(g_ImageList.get_count() + " files in image list, and " + g_MultiUpload.get_count() + " files in MultiUpload control");
}
}
//Event handler for the click event of the clear button
function onClear()
{
if(g_MultiUpload)
g_MultiUpload.clear();
if(g_ImageList)
g_ImageList.clear();
}
//-->
</script>
</body>
</html>
|
By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.
If a file you wish to view isn't highlighted, and is a text file (not binary), please
let us know and we'll add colourisation support for it.
Submit an article or tip