帮酷LOGO
0 0 评论
文章标签:控制  Controls  文件  图像  上传  文件上传  Server  Imagelist  

MultiUpload2 and ImageList in run mode

介绍

ImageList和MultiUpload最近在两个文章中进行了描述:

我们的目标是实现一个专业的GUI上传文件,这是通过结合 ImageListMultiUpload 实现。 our和IIS的环境是 ASP.NET,我们的ImageListMultiUpload 控件都使用 ASP.NET AJAX扩展 1.0,你可以在这里下载和安装 AJAX。

背景

本文是"memba Velodoc XP版本"的开源控件,可以从下载( 这个页面提供了指向 Codeplex。和 Sourceforge.NET)的链接,并在GPL许可协议下发布)。 这些控件包括一个 ImageList 和一个 MultiUpload 控件,我们在本文中使用这些控件。 你可以在的这个链接中实验这些控件。

使用代码

创建新的ASP.NET ajax站点,并添加对包含 ImageListMultiUpload2 服务器控件的 Memba.WebControls.XP.dll 插件的引用。 Memba.WebControls.XP.dll 是 Memba Velodoc XP版的一部分。 源代码可以在上面提到的下载位置获得。

通过拖放控件或者在现有的<form> 标记之间添加以下代码,打开 Default.aspx 页,然后添加 ImageListMultiUpload2 服务器控件,或者通过添加以下代码来添加它们:

<formid="form1"runat="server"enctype="multipart/form-data"><asp:ScriptManagerID="ScriptManager"runat="server"><Scripts><asp:ScriptReferencePath="~/scripts/Memba.Utils.js"/></Scripts></asp:ScriptManager><!--<span class="code-comment"> MultiUpload2 --></span><mbui:MultiUpload2ID="MultiUpload"runat="server"Text="Choose file..."Width="100px"CssClass="cssMultiUpload"HoverCssClass="cssMultiUploadHover"></mbui:MultiUpload2><!--<span class="code-comment"> MultiUpload2 --></span><!--<span class="code-comment"> ImageList --></span><mbui:ImageListID="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><!--<span class="code-comment"> ImageList --></span><inputtype="button"id="ClearButton"value="Clear"onclick="onClear();"/><asp:ButtonID="SubmitButton"runat="server"Text="Submit"OnClick="SubmitButton_Click"/></form>

这里表单还包括一个HTML按钮( ClearButton ) 和一个 ASP.NET 提交按钮( SubmitButton )。

你可以能必须使用以下语句在页面顶部 register 标记前缀:

<%@RegisterAssembly="Memba.WebControls.XP"Namespace="Memba.WebControls"TagPrefix="mbui"%>

确保在 Memba.Utils.js 中添加了一个脚本引用,它包含一个必要的实用工具函数来在JavaScript中创建 guid。

要使文件上载工作,你需要进行两个重要设置:

  • 定义 enctype="多部分/表单数据"form 标记上;
  • httpRuntime 部分添加到你的web.config的<system.web> 部分。 上介绍中介绍的文章中对这一点进行。

用于 ImageListMultiUpload 表示的inline CSS样式也在相应的文章中进行了描述。 添加样式后,设计模式中的页面应如下所示:

https://www.codeproject.com/KB/Ajax/ProUpload/ProUpload2.png

我们的页面已经设计好了,我们需要代码来保存已经发布文件。 双击提交按钮( btnSubmit ) 以在 Default.aspx.cs 中实现服务器端 Click 事件处理程序:

privateconststring TARGET_DIR = "~/";protectedvoid SubmitButton_Click(object sender, EventArgs e)
{
 //Check target directorystring sTargetDir = Request.MapPath(TARGET_DIR);
 System.Diagnostics.Debug.Assert(Directory.Exists(sTargetDir));
 //Iterate through posted filesfor (int i = 0; i < Request.Files.Count; i++)
 {
 HttpPostedFile objFile = Request.Files[i];
 //Make sure file input has contentif ((objFile.ContentLength >0) && (objFile.FileName.Length >0))
 {
 //Get target file path for save asstring sFileName = Path.GetFileName(objFile.FileName);
 string sFilePath = Path.Combine(sTargetDir, sFileName);
 FileInfo objFileInfo = new FileInfo(sFilePath);
 //No business rule, i.e. we just want to avoid failureif (objFileInfo.Exists)
 {
 objFileInfo.Attributes &= ~FileAttributes.ReadOnly;
 objFileInfo.Delete();
 }
 //Save file objFile.SaveAs(sFilePath);
 }
 }
 //Clear the list, otherwise the ImageList has items//Which the MuliUpload component does not have ImageList.ImageListItemCollection.Clear();
}

将下面的语句添加到 file:的顶部

using System.IO; //Directory, Path, FileInfo 

这里要注意的是,每次加载页面时浏览器都会清除HTML文件输入控件,特别是在 postback 之后。 无法设置文件输入控件的值,否则web服务器可以在没有他们允许的情况下获得用户文件。 这里安全限制没有解决方法。 我们的ImageList 被设计为维护它的状态,因这里需要清除与 MultiUpload 控件的同步。

在这个阶段我们可以运行页面并上传文件,但是需要一些JavaScript客户端代码来显示在控件中所选择的文件中。 在页面的</body> 结束标记之前添加以下脚本:

<script type="text/javascript">
<!--// Declare global variables for the various controlsvar g_MultiUpload;var g_ImageList;//pageLoad function of ASP.NET Ajax Extensions frameworkfunction 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 frameworkfunction 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 controlfunction onBrowse(sender, args)
{
 if((g_ImageList) && (g_MultiUpload))
 {
 //Search for the item in the Imagelistif (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 itemvar 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 controlfunction 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 buttonfunction onClear()
{
 if(g_MultiUpload)
 g_MultiUpload.clear();
 if(g_ImageList)
 g_ImageList.clear();
}//--></script>

ASP.NET AJAX扩展提供了两个重要的JavaScript事件处理程序:

  • 当加载和初始化页DOM和脚本时,框架将调用 pageLoad。 这是获取对控件的引用和添加事件处理程序的好地方。
  • 当页面卸载时,框架会调用 pageUnload。 建议在这个阶段清除处理程序。

脚本 上面 实现 MultiUpload 控件的Browse 事件的事件处理程序,为 ImageList 控件的Remove 事件和of的Click 事件。 Browse 事件处理程序将选定的文件添加到 ImageListImageList 项具有名为 tag的属性,它被设置为 MultiUpload 控件中文件输入的标识符。 Remove 事件处理程序读取从 ImageList 移除的项的tag,从 MultiUpload 控件中删除相应的文件输入。 Clear 事件处理程序只清除 ImageListMultiUpload 控件。

按F5运行项目,然后单击标记为"选择文件。"的MultiUpload 控件将文件添加到列表中。 将鼠标移到 ImageList 中相应的项目上,以显示删除 icon的红色十字。 单击 remove icon to从上传选择中删除相应的文件。 添加更多文件测试清除按钮。 添加文件,并提交上传文件。

在这个阶段,完成专业上传页面需要一个进度指示器。 建议使用AJAX读取以显示 ASP.NET 服务器任务的进度。 如果希望结合所有这些控件,我建议你下载 Velodoc XP版本和开发人员教程的源代码,这将帮助你进入下一阶段。

Points of interest

这里 MultiUpload 控件隐藏动态创建文件输入HTML控件的复杂性,并消除了对已经选择要上载的文件的表示的任何限制。 ImageList 控件的组合是这里描述的一个很好的表示选项,这对旧的,文件输入控件是。 在more中,ImageListMultiUpload 控件的源代码可以在 CodeplexGoogle Code 和Sourceforge.NET 中获得,并在great中进行了注释。

历史记录

  • 版本 1.0 - 日期 20 2007年月。


文章标签:文件  Server  控制  图像  上传  Controls  文件上传  uploads  

Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语