ASP.Net中基于UpdatePanel的无刷新上传（用户控件）（C#）
2012-03-03 13:42
681 查看
注：这个方法并不能真正实现无刷新上传文件，只是能够使得上传文件后，滚动条的位置保持不变，相当于无刷新上传。
1、建立用户控件Up.ascx
2、在用户控件中添加UpdatePanel，代码如下
<asp:UpdatePanel ID="UpdatePanel1" runat="server" RenderMode="Block" UpdateMode="Conditional">
<ContentTemplate>
<asp:FileUpload ID="FileUp" runat="server" Height="24px" />
<asp:Button ID="UPing" runat="server" Text=" 上传 " Width="73px" Height="24px" />
<div id="Msg" runat="server" >等待上传...</div>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="UPing" />
</Triggers>
</asp:UpdatePanel>
3、在Up.ascx.cs中添加如下代码
public partial class Up : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
//这里 Msg.ClientID 很重要，要是直接引用，在父级页面Msg的ID可能会成这个样子 UP1_Msg ，其中UP1是父级页面内引用该控件的ID
//这里的js要考虑在浏览器中解析正确，就必须考虑转义符 \
string js = "javascript:document.getElementById('" + Msg.ClientID + "').innerHTML = '上传中...（可以在这里放置动画图片 或者 iframe 调用其他页面（aspx）实现上传进度的检测以及上传事件的处理）';";
UPing.Attributes.Add("onclick", js);
}
}
public event EventHandler onClick
{
add
{
UPing.Click += value;
//UPing.Text = "事件已经加载" + DateTime.Now.ToString() + value.Method.ToString();
}
remove
{
UPing.Click -= value;
//UPing.Text = "事件已经卸载" + DateTime.Now.ToString();
}
}
/// <summary>
/// 消息
/// </summary>
public string msg
{
get
{
//获取
return Msg.InnerHtml.ToString();
}
set
{
//设置
Msg.InnerHtml = value;
}
}
/// <summary>
/// FileUpload （组件的公开）
/// </summary>
public FileUpload FileUpload
{
get
{
//获取
return FileUp;
}
set
{
//设置
FileUp = value;
}
}
}
4、创建网页（红色代码要注意）
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="无刷上传.aspx.cs" Inherits="MyLove" MaintainScrollPositionOnPostback="true" Debug="true"%>
<%@ Register src="UP.ascx" tagname="UP" tagprefix="uc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无刷上传</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div style="height:500px; background:#CCFFCC;">我是为了看看上传数据提交后，有啥变化没有</div>
<uc1:UP ID="UP1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server" RenderMode="Block" UpdateMode="Conditional">
<ContentTemplate>
<uc1:UP ID="UP2" runat="server" />
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="UP2" />
</Triggers>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
5、后台代码部分
public partial class MyLove : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
UP1.onClick += new EventHandler(UP1_UPing_Click);//注册动作（事件，使用代理）
UP2.onClick += new EventHandler(UP2_UPing_Click);
}
/// <summary>
/// 上传保存事件1（就是平时按钮用的）
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void UP1_UPing_Click(object sender, EventArgs e)
{
if (UP1.FileUpload.HasFile)
{
long L1 = UP1.FileUpload.FileContent.Length / 1024;//字节流
int L2 = UP1.FileUpload.PostedFile.ContentLength / 1024;//字节长度
string FileName = UP1.FileUpload.FileName;
UP1.msg = "实例化为:UP1" + DateTime.Now.ToString() + "<br/>上传字节流长度是:" + L1.ToString() + "KBit" + "<br/>上传文件大小是（千字节）:"
+ L2.ToString() + "KB.";
//保存
UP1.FileUpload.SaveAs(Server.MapPath(@"~/temp/") + FileName);
}
else
{
UP1.msg = "不要忽悠我，没文件啊！" + DateTime.Now.ToString();
}
}
/// <summary>
/// 上传保存事件2
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void UP2_UPing_Click(object sender, EventArgs e)
{
if (UP2.FileUpload.HasFile)
{
string FileName = UP2.FileUpload.FileName;
UP2.msg = "实例化为:UP2 " + DateTime.Now.ToString() + "<br/>上传的文件名是:" + FileName;
//保存
UP2.FileUpload.PostedFile.SaveAs(Server.MapPath(@"~/temp/") + FileName);
}
else
{
UP2.msg = "你就接着忽悠吧 ~ " + DateTime.Now.ToString();
}
}
}
如果出现 检测到有潜在危险的 Request.Form 值。 则在.aspx文件头中加入这句： <%@ Page validateRequest="false" %>
参考网址：我就是根据这个网址内容修改的，感谢作者。
http://apps.hi.baidu.com/share/detail/15914216
1、建立用户控件Up.ascx
2、在用户控件中添加UpdatePanel，代码如下
<asp:UpdatePanel ID="UpdatePanel1" runat="server" RenderMode="Block" UpdateMode="Conditional">
<ContentTemplate>
<asp:FileUpload ID="FileUp" runat="server" Height="24px" />
<asp:Button ID="UPing" runat="server" Text=" 上传 " Width="73px" Height="24px" />
<div id="Msg" runat="server" >等待上传...</div>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="UPing" />
</Triggers>
</asp:UpdatePanel>
3、在Up.ascx.cs中添加如下代码
public partial class Up : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
//这里 Msg.ClientID 很重要，要是直接引用，在父级页面Msg的ID可能会成这个样子 UP1_Msg ，其中UP1是父级页面内引用该控件的ID
//这里的js要考虑在浏览器中解析正确，就必须考虑转义符 \
string js = "javascript:document.getElementById('" + Msg.ClientID + "').innerHTML = '上传中...（可以在这里放置动画图片 或者 iframe 调用其他页面（aspx）实现上传进度的检测以及上传事件的处理）';";
UPing.Attributes.Add("onclick", js);
}
}
public event EventHandler onClick
{
add
{
UPing.Click += value;
//UPing.Text = "事件已经加载" + DateTime.Now.ToString() + value.Method.ToString();
}
remove
{
UPing.Click -= value;
//UPing.Text = "事件已经卸载" + DateTime.Now.ToString();
}
}
/// <summary>
/// 消息
/// </summary>
public string msg
{
get
{
//获取
return Msg.InnerHtml.ToString();
}
set
{
//设置
Msg.InnerHtml = value;
}
}
/// <summary>
/// FileUpload （组件的公开）
/// </summary>
public FileUpload FileUpload
{
get
{
//获取
return FileUp;
}
set
{
//设置
FileUp = value;
}
}
}
4、创建网页（红色代码要注意）
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="无刷上传.aspx.cs" Inherits="MyLove" MaintainScrollPositionOnPostback="true" Debug="true"%>
<%@ Register src="UP.ascx" tagname="UP" tagprefix="uc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无刷上传</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div style="height:500px; background:#CCFFCC;">我是为了看看上传数据提交后，有啥变化没有</div>
<uc1:UP ID="UP1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server" RenderMode="Block" UpdateMode="Conditional">
<ContentTemplate>
<uc1:UP ID="UP2" runat="server" />
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="UP2" />
</Triggers>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
5、后台代码部分
public partial class MyLove : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
UP1.onClick += new EventHandler(UP1_UPing_Click);//注册动作（事件，使用代理）
UP2.onClick += new EventHandler(UP2_UPing_Click);
}
/// <summary>
/// 上传保存事件1（就是平时按钮用的）
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void UP1_UPing_Click(object sender, EventArgs e)
{
if (UP1.FileUpload.HasFile)
{
long L1 = UP1.FileUpload.FileContent.Length / 1024;//字节流
int L2 = UP1.FileUpload.PostedFile.ContentLength / 1024;//字节长度
string FileName = UP1.FileUpload.FileName;
UP1.msg = "实例化为:UP1" + DateTime.Now.ToString() + "<br/>上传字节流长度是:" + L1.ToString() + "KBit" + "<br/>上传文件大小是（千字节）:"
+ L2.ToString() + "KB.";
//保存
UP1.FileUpload.SaveAs(Server.MapPath(@"~/temp/") + FileName);
}
else
{
UP1.msg = "不要忽悠我，没文件啊！" + DateTime.Now.ToString();
}
}
/// <summary>
/// 上传保存事件2
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void UP2_UPing_Click(object sender, EventArgs e)
{
if (UP2.FileUpload.HasFile)
{
string FileName = UP2.FileUpload.FileName;
UP2.msg = "实例化为:UP2 " + DateTime.Now.ToString() + "<br/>上传的文件名是:" + FileName;
//保存
UP2.FileUpload.PostedFile.SaveAs(Server.MapPath(@"~/temp/") + FileName);
}
else
{
UP2.msg = "你就接着忽悠吧 ~ " + DateTime.Now.ToString();
}
}
}
如果出现 检测到有潜在危险的 Request.Form 值。 则在.aspx文件头中加入这句： <%@ Page validateRequest="false" %>
参考网址：我就是根据这个网址内容修改的，感谢作者。
http://apps.hi.baidu.com/share/detail/15914216
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- ASP.Net(C#)中基于ScriptManager-UpdatePanel的无刷新上传（用户控件）的实现
- [ASP.NET] UpdatePanel局部刷新 -- 与用户控件使用
- 新写的一个使用ASP.NET AJAX中的UpdatePanel控件实现GridView的无刷新删除，更新，添加，查询！
- asp.net UpdatePanel实现无刷新上传图片
- AJAX 怎样在一个UpDatePanel中刷新另一个updatePanel (asp.net C#)
- 在UpdatePanel上使用FileUpload上传文件 (asp.net C#)
- HttpContext是干什么的； asp.net 获取网站路径;DataSet读取xml文件;updatepanel 控件的局部刷新 always和condition
- c#(asp.net) updatepanel 局部刷新实例
- asp.net UpdatePanel实现无刷新上传图片
- HttpContext是干什么的； asp.net 获取网站路径;DataSet读取xml文件;updatepanel 控件的局部刷新 always和condition
- c#(asp.net) updatepanel 局部刷新实例收藏
- 用户js和ASP.NET UpdatePanel 控件之间的互动
- 用户js和ASP.NET UpdatePanel 控件之间的互动
- 用户js和ASP.NET UpdatePanel 控件之间的互动：
- Asp.net 2.0 用 FileUpload 控件实现多文件上传(用户控件)
- ASP.Net UpdatePanel控件（转）
- ASP.NET Ajax UpdatePanel 刷新時的淡出淡入效果
- asp.net，C#，html控件的File控件实现多文件上传简单实例，vs2010
- Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现)