移动项目开发笔记(.net下关于上传文件解决方案比较和探讨)

     在项目中用到了改变上传控件的样式，最后通过不断尝试终于实现了想要的效果:移动项目开发笔记(改变文件上传控件的默认风格) ，实现了普通的文件上传控件所实现的功能。但是随着项目的开发以及根据客户提出的需求，为了能给用户带来更好的用户体验，需要让页面不刷新而提交页面，也就是说需要使用Ajax技术，其实在asp.net ajax框架能很好的把页面实现成不刷新的（确切的说是使用asp:UpdatePanel控件把整个页面上form表单包含起来，这样就能实现不刷新页面提交）。但是这给项目中的上传控件提出了一个很大的挑战：也就是说上传控件在UpdatePanel中无法实现不刷新的异步上传。

下面是一些解决方案，能力有限,希望朋友们提出宝贵的意见以及更好的解决方案：欢迎朋友们指正。谢谢!

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

 <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后台代码事件如下:

   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);
    }

然而当选择一个文件并点击按钮时候最后的效果是

结果:也就是说后台无法访问到上传控件中选择到的值。(UpdatePanel是部分刷新的，并没有把我们上传的文件转换成流传送到服务器端)

 

2.UpdatePanel中的Triggers指定上传的按钮并同步发送整个页面

<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事件代码如下:

   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);
    }

最后选择文件点击按钮时候效果

结果：虽然能够在服务器端访问到用户选择文件的值，但是页面产生了回发，不满足不刷新而上传文件.

3.通过Iframe框架页面实现文件上传

IframeUpload.aspx页面

 <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页面为:

<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属性来隐藏刷新部分.

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

后台事件:

  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);
    }

 

结果:当点击按钮后，页面并没有刷新，刷新的是隐藏的Iframe框架（通过设置Form的Target属性），不过由于Iframe的style="display:none"，所以用户无法看到，就像没有刷新一样。这样就进一步的增强了用户的体验，模拟了不刷新而异步上传的效果.

5.通过window.open弹出页面实现上传，将上传后的文件返回给主页面

<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>)表示在本页中打开

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

最后效果:

结果:将上传文件引起的刷新问题转移到新打开的页面中，避免了主页面的刷新问题，这样也增强了用户体验.

6.通过一些支持Ajax上传文件的组件(略)

 

上面是我个人对文件上传这个功能的一点理解和解决方案，欢迎朋友们提出其他解决方案，也可以对上面几种解决方案给出评价，谢谢朋友们的支持。

 Regards,

Charles Chen

msn:Charles.C.Chen@newegg.net

Email:gotosunny@msn.com