Ajax移步项目花费笔记(.net下关于上传文件消除方案相比较和商量)

     在类型中用到了转移上传控件的体制,最后经过持续尝试终于完成了想要的成效:挪动项目开发笔记(改变文件上传控件的暗中认同风格) ,已毕了家常的文本上传控件所完毕的效应。可是随着项目标支付以及根据客户指出的须要,为了能给用户带来更好的用户体验,必要让页面不刷新而付出页面,也等于说须求动用Ajax技术,其实在asp.net
ajax框架能很好的把页面完成成不刷新的(确切的就是使用asp:UpdatePanel控件把方方面面页面上form表单包含起来,那样就能兑现不刷新页面提交)。不过那给项目中的上传控件指出了壹个很大的挑衅:约等于说上传控件在UpdatePanel中不可以已毕不刷新的异步上传。

上边是有些解决方案,能力简单,希望恋人们指出宝贵的见地以及更好的消除方案:欢迎朋友们指正。多谢!

1.在UpdatePanel中的ContentTemplate中直接放置Asp:FileUpload

Ajax 1Ajax 2Code
 <form id=”form1″ runat=”server”>
    <div>
        <asp:ScriptManager ID=”ScriptManager1″ runat=”server”>
        </asp:ScriptManager>
    
    </div>
        <asp:UpdatePanel ID=”UpdatePanel1″ runat=”server”>
            <ContentTemplate>
                <asp:FileUpload ID=”UpLoadFile” runat=”server” />
                <asp:Button ID=”btnUpload” runat=”server” Text=”Button” OnClick=”btnUpload_Click” />
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>

按钮 btnUpload后台代码事件如下:

Ajax 3Ajax 4Code
   protected void btnUpload_Click(object sender, EventArgs e)
    {
        string script = string.Format(“上传的文本路径是:{0}”,
            this.UpLoadFile.PostedFile == null ? string.Empty : this.UpLoadFile.PostedFile.FileName);
        ScriptManager.RegisterClientScriptBlock(this,this.GetType(),”OK”,”alert(‘”+script+”‘)”,true);
    }

然而当选拔三个文件并点击按钮时候最终的机能是

Ajax 5

结果:约等于说后台不可以访问到上传控件中接纳到的值。(UpdatePanel是一对刷新的,并从未把大家上传的文书转换到流传送到劳动器端)

 

2.UpdatePanel中的Triggers钦命上传的按钮并一同发送全部页面

Ajax 6Ajax 7Code
<form id=”form1″ runat=”server”>
        <div>
            <asp:ScriptManager ID=”ScriptManager1″ runat=”server”>
            </asp:ScriptManager>
        </div>
        <asp:UpdatePanel ID=”UpdatePanel1″ runat=”server”>
            <ContentTemplate>
                <asp:FileUpload ID=”UpLoadFile” runat=”server” />
                <asp:Button ID=”btnUpload” runat=”server” Text=”Button” OnClick=”btnUpload_Click” />
            </ContentTemplate>
            <Triggers>
                <asp:PostBackTrigger ControlID=”btnUpload” />
            </Triggers>
        </asp:UpdatePanel>
    </form>

按钮btnUpload事件代码如下:

Ajax 8Ajax 9Code
   protected void btnUpload_Click(object sender, EventArgs e)
    {
        string script =string.Format(“上传的文件路径是:{0}”,
            this.UpLoadFile.PostedFile == null ? string.Empty : this.UpLoadFile.PostedFile.FileName);
        ScriptManager.RegisterStartupScript(this, this.GetType(), “OK”, “alert(‘” + (script) + “‘);”, true);
    }

终极选项文件点击按钮时候效果

Ajax 10

结果:即使可以在劳务器端访问到用户挑选文件的值,可是页面暴发了回发,不满意不刷新而上传文件.

3.由此Iframe框架页面落成公文上传

IframeUpload.aspx页面

Ajax 11Ajax 12Code
 <form id=”form1″ runat=”server”>
        <div>
            <asp:ScriptManager ID=”ScriptManager1″ runat=”server”>
            </asp:ScriptManager>
        </div>
        <asp:UpdatePanel ID=”UpdatePanel1″ runat=”server”>
            <ContentTemplate>
                <iframe src=”Iframe/UploadFrame.aspx” scrolling=”no” frameborder=”no” height=”45px;” width=”100%”></iframe>
                <asp:Button runat=”server” ID=”btnView” Text=”View” />
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>

其中Iframe/UploadFrame.aspx页面为:

Ajax 13Ajax 14Code
<form id=”form1″ runat=”server”>
        <div>
            <asp:FileUpload ID=”UpLoadFile” runat=”server” />
            <asp:Button ID=”btnUpload” runat=”server” Text=”Button” OnClick=”btnUpload_Click” />
        </div>
    </form>

结果:那样的话上传的功用就全盘交由了Ifram/eUploadFrame.aspx框架页处理了,和日常的上传没什么不一样。然后那样能给客户比较好的体验,约等于说当前页面(使用UploadFrame.aspx的页面IframeUpload.aspx),就落到实处了无刷新页面处理数量。(即使UploadFrame落成了刷新,可是对于iframeUpload.aspx来说是未曾刷新的,可以给用户带来比较好的体验).

 

4.透过安装From的Target属性来模拟不刷新上传(实质上是刷新的,只是用户看不见)

思路:通过设置Form的Target属性为Iframe的Name属性来隐藏刷新部分.

Ajax 15Ajax 16Code
 <form id=”form1″ runat=”server” target=”FrameName”>
        <iframe name=”FrameName” style=”display: none;”></iframe>
        <div>
            <asp:FileUpload ID=”UpLoadFile” runat=”server” />
            <asp:Button ID=”btnUpload” runat=”server” Text=”Button” OnClick=”btnUpload_Click” />
Ajax,        </div>
    </form>

后台事件:

Ajax 17Ajax 18Code
  protected void btnUpload_Click(object sender, EventArgs e)
    {
        string script = string.Format(“上传的文件路径是:{0}”,
           this.UpLoadFile.PostedFile == null ? string.Empty : this.UpLoadFile.PostedFile.FileName);
        ScriptManager.RegisterClientScriptBlock(this, this.GetType(), “OK”, “alert(‘” + (script) + “‘);”, true);
    }

 

Ajax 19

结果:当点击按钮后,页面并从未刷新,刷新的是暗藏的Iframe框架(通过设置Form的Target属性),不过由于Iframe的style=”display:none”,所以用户不可以看到,似乎没有刷新一样。那样就愈加的增高了用户的体验,模拟了不刷新而异步上传的效果.

5.因而window.open弹出页面完结上传,将上传后的文件重临给主页面

Ajax 20Ajax 21Code
<div>
        <input type=”button” id=”btnOpenFile” name=”btnOpenFile” value=”上传” onclick=”OpenFile();” />
         <script>
        function OpenFile()
        {
            window.showModalDialog(“Iframe/UploadFrame.aspx”,””,”status:no;dialogWidth=400px;dialogHeight=300px;center=yes;help=no”);
        }
    </script>
    </div>

Iframe/UploadFrame.aspx代码和平日没什么两样(须求注目的在于<Head></Head>之间加了<base
target=”_seft”></base>)表示在本页中开辟

Ajax 22Ajax 23Code
<head runat=”server”>
    <title>Untitled Page</title>
   <base target=”_self”>
    </base>
</head>
<body>
    <form id=”form1″ runat=”server”>
        <div>
            <asp:FileUpload ID=”UpLoadFile” runat=”server” />
            <asp:Button ID=”btnUpload” runat=”server” Text=”Button” OnClick=”btnUpload_Click” />
        </div>
    </form>
</body>

终极效果:

Ajax 24

结果:将上传文件引起的基础代谢难点转移到新开辟的页面中,避免了主页面的刷新难点,这样也增强了用户体验.

6.透过某个支撑Ajax上传文件的零部件(略)

 

地方是小编个人对文件上传这些效果的少数了解和化解方案,欢迎朋友们指出任何化解方案,也足以对地方二种缓解方案提交评价,感激朋友们的帮衬。

 Regards,

Charles Chen

msn:Charles.C.Chen@newegg.net

Email:gotosunny@msn.com

相关文章