一个非常好用的多文件上传例子

1.       Introduction:

这个程序的目标是实现一个比较专业的上传文件的GUI。通过结合ImageList和MultiUpload实现，需要的环境是ASP.NET 2.0和IIS,以及ASP.NET AJAX Extension的ImageList和MultiUpload控件。

2.       Background:

这个程序中用到了opensouce的控件”Memba Velodoc XP Edition”，你可以从这里下载。它的license是GPL。

3.       Using the code:

在Visual Studio 2005中,创建一个ASP.NET AJAX-Enabled站点,然后在接口中添加Menba.WebControls.XP.dll,它里面包含了ImageList和MultiUpload2这两个控件。这个dll是Memba Velodoc XP Edition控件的一部分。可以从上面提供的地址下载。

打开Default.aspx文件添加一个ImageList和一个MultiUpload2控件在form节点中。这里如果你已经把那个dll加入到toolbox中,那么直接拖过来一个就行了。

<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" />

</form>

Form中也包含了一个HTML的button控件和一个ASP.NET的SubmitButton控件。

一定要记住在页面注册Memba.WebControls.XP。同时确保你在页面中添加了MembaUtils.js引用，它确保了创建GUIDs的功能。

如果要实现文件上传,你必须确保两个重要的设定:

1. 在form的属性中定义’enctype=”multipart/form-data” ‘;
2. 在web.config文件的<system.web>部分添加httpRuntime节点。

这时ImageList控件和MultiUpload已经自动添加上了CSS样式。现在你的aspx页面显示如下:

 

页面已经OK,那么点击Submit按钮时的提交事件代码如下(default.):

private const string TARGET_DIR = "~/";

 

protected void SubmitButton_Click(object sender, EventArgs e)

{

    //Check target directory

    string sTargetDir = Request.MapPath(TARGET_DIR);

    System.Diagnostics.Debug.Assert(Directory.Exists(sTargetDir));

 

    //Iterate through posted files

    for (int i = 0; i < Request.Files.Count; i++)

    {

        HttpPostedFile objFile = Request.Files[i];

        //Make sure file input has content

        if ((objFile.ContentLength > 0) && (objFile.FileName.Length > 0))

        {

            //Get target file path for save as

            string 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 failure

            if (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();

}

需要添加下面这个命名空间。

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

这里比较重要的的一个事情是要注意浏览器每次加载页面时都会清除HTML的输入控件部分。特别是当执行一个PostBack时。

现在我们需要做的就是上传文件,不过我们需要一点javascript来显示哪些文件被选中，在你的</body>标记前面加上下面这段javascript:

<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>

ASP.NET AJAX extensions provide two important JavaScript event handlers:

• pageLoad is called by the framework when the page DOM and scripts are loaded and initialized. This is a good place to get references to controls and add event handlers.
• pageUnload is called by the framework when the page unloads. It is recommended to clear handlers at this stage.

 

4.       Point of interest:

如果需要源代码我可以传给大家。以前上传了很多资料都没人下载。。这个就不上传了,以免浪费csdn的空间。