ASP.Net中基于UpdatePanel的无刷新上传（用户控件）（C#）

最新推荐文章于 2015-12-12 17:23:55 发布

iteye_5282

最新推荐文章于 2015-12-12 17:23:55 发布

阅读量226

点赞数

文章标签： xhtml ui c#

注：这个方法并不能真正实现无刷新上传文件，只是能够使得上传文件后，滚动条的位置保持不变，相当于无刷新上传。

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 classMyLove: 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();
}
}
}