类似 Gmail 的文件上传按钮

• 下载源代码 - 36 KB

引言

这是一个继承的按钮控件，可以像 Gmail 一样执行文件上传。该按钮使用继承的 IFRAME 技术来避免完全页面渲染，从而为用户提供良好的体验。

背景

我搜索了一篇文章来实现 Gmail 样式的文件上传。 似乎我们无法使用 AJAX 执行文件上传。 我从 webtoolkit 获取了一些不错的 javascript，它被编写为与 PHP 一起工作。 该脚本使用了隐藏的 IFRAME 技术。 在这里，我创建了一个派生的 ASP.NET 按钮控件，它可以实现这个技巧。

使用代码

要打开项目，请解压缩它并打开文件 FileUploadControlTest.sln。 打开文件 UploadButton.cs。 OnInit 方法将注册 LoadComplete 事件，包含 javascript（这是一个 Web 资源，有关 Web 资源的更多信息，请点击 此处），并将 onsubmit 语句发送到客户端。

    /// <summary />

    /// Basic registration of events

    /// </summary />

    /// 

    protected override void OnInit(EventArgs e)
    {
        this.Page.LoadComplete += new EventHandler(Page_LoadComplete);
        base.OnInit(e);
        this.Page.ClientScript.RegisterClientScriptInclude(this.GetType(), 
            "ScriptBlock", 
            this.Page.ClientScript.GetWebResourceUrl(this.GetType(), 
            "WebControls.JScripts.AIMScript.js"));
        string onsubmitstatement = "return AIM.submit(document.forms[0], 
            {'onStart' : " + OnStartScript + ", 
            'onComplete' : " + OnCompleteScript + "})";
        this.Page.ClientScript.RegisterOnSubmitStatement(this.GetType(), 
            "OnSubmitScript", onsubmitstatement);
    }

onsubmit 脚本在 dom 中创建一个新的隐藏 IFRAME，并将表单的 target 设置为这个 IFRAME。 因此，用户看到的部分在回发后不会被重新绘制。 在页面的 Page_LoadComplete 事件中，我们将获得填充了上传文件的 FileUpload 控件。 我们将在 Page_LoadComplete 方法中调用事件处理程序。 执行事件处理程序后的返回文本将返回给客户端。

    /// <summary />

    /// After completing page load, call the event handler on page to perform

    /// operations on uploaded file

    /// </summary />

    /// 

    /// 

    void Page_LoadComplete(object sender, EventArgs e)
    {
        if (Page.IsPostBack)
        {
            if (this.Parent.FindControl(RelatedFileUploadControlId) != null)
            {
                FileUpload fu = 
        this.Parent.FindControl(RelatedFileUploadControlId) as FileUpload;
                UploadButtonEventArgs args = new UploadButtonEventArgs(fu);
                UploadButtonEventHandler handler = 
                      (UploadButtonEventHandler)Events[EventUploadClickKey];
                if (handler != null)
                {
                    try
                    {
                        WriteTextToClient(handler(this, args));
                    }
                    catch (System.Threading.ThreadAbortException ex)
                    {
                        // do nothing

                    }
                    catch (Exception ex)
                    {
                        WriteTextToClient("An exception occurred - " + 
                                          ex.Message);
                    }
                }
                else
                {
                    WriteTextToClient("Handler not registered");
                }
            }
        }
    }

在 IFRAME 的 onload 方法中，我们将调用注册为 OnCompleteScript 的函数，并将 IFRAME 内部的文本（即响应文本）传递给该函数。

关注点

隐藏 IFRAME 技术是一种旧的技术，但在某些复杂情况下，它会帮助我们！！！