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

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

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



Code
formid="form1"runat="server"
div
asp:ScriptManagerID="ScriptManager1"runat="server"
/asp:ScriptManager

/div
asp:UpdatePanelID="UpdatePanel1"runat="server"
ContentTemplate
asp:FileUploadID="UpLoadFile"runat="server"/
asp:ButtonID="btnUpload"runat="server"Text="Button"OnClick="btnUpload_Click"/
/ContentTemplate
/asp:UpdatePanel
/form
按钮 btnUpload后台代码事件如下: Code
protectedvoidbtnUpload_Click(objectsender,EventArgse)
{
stringscript=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指定上传的按钮并同步发送整个页面
Code
formid="form1"runat="server"
div
asp:ScriptManagerID="ScriptManager1"runat="server"
/asp:ScriptManager
/div
asp:UpdatePanelID="UpdatePanel1"runat="server"
ContentTemplate
asp:FileUploadID="UpLoadFile"runat="server"/
asp:ButtonID="btnUpload"runat="server"Text="Button"OnClick="btnUpload_Click"/
/ContentTemplate
Triggers
asp:PostBackTriggerControlID="btnUpload"/
/Triggers
/asp:UpdatePanel
/form
按钮btnUpload事件代码如下: Code
protectedvoidbtnUpload_Click(objectsender,EventArgse)
{
stringscript=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
页面
Code
formid="form1"runat="server"
div
asp:ScriptManagerID="ScriptManager1"runat="server"
/asp:ScriptManager
/div
asp:UpdatePanelID="UpdatePanel1"runat="server"
ContentTemplate
iframesrc="Iframe/UploadFrame.aspx"scrolling="no"frameborder="no"height="45px;"width="100%"/iframe
asp:Buttonrunat="server"ID="btnView"Text="View"/
/ContentTemplate
/asp:UpdatePanel
/form
其中Iframe/UploadFrame.aspx页面为: Code
formid="form1"runat="server"
div
asp:FileUploadID="UpLoadFile"runat="server"/
asp:ButtonID="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属性来隐藏刷新部分.
Code
formid="form1"runat="server"target="FrameName"
iframename="FrameName"style="display:none;"/iframe
div
asp:FileUploadID="UpLoadFile"runat="server"/
asp:ButtonID="btnUpload"runat="server"Text="Button"OnClick="btnUpload_Click"/
/div
/form
后台事件:
Code
protectedvoidbtnUpload_Click(objectsender,EventArgse)
{
stringscript=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弹出页面实现上传，将上传后的文件返回给主页面
Code
div
inputtype="button"id="btnOpenFile"name="btnOpenFile"value="上传"onclick="OpenFile();"/
script
functionOpenFile()
{
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)表示在本页中打开
Code
headrunat="server"
titleUntitledPage/title
basetarget="_self"
/base
/head
body
formid="form1"runat="server"
div
asp:FileUploadID="UpLoadFile"runat="server"/
asp:ButtonID="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