挪动类开笔记(.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” />
        </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

相关文章