网上有很多无刷新文件上传的代码，看了很多感觉都比较复杂，有些封装的很好但是又缺乏了灵活性，个人觉得其实无刷新文件上传并不麻烦，所以写下此文供大家参考批评。
好了闲话不多说，现在我们现在就从头来实现一个无刷新文件上传的功能。
首先建立一个名为/images/uploads/news/2010/01/23/09/2010012309165814.jpg的页面，代码如下（注：本文中的js全部采用jQuery操作）：
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<script type="text/javascript" src="/images/uploads/news/2010/01/23/09/201001230916471.jpg"></script>
<script type="text/javascript">
function setfile(filename)
{
$("#hd").val(filename);
alert("上传成功");
}
function getfilename()
{
return $("#hd").val();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
无刷新的上传：<asp:FileUpload ID="fu" runat="server"/><asp:Button ID="Button1" runat="server" Text="upFile" OnClick="Button1_Click" />
<asp:HiddenField ID="hd" runat="server" />
</div>
</form>
</body>
</html>
以下是/images/uploads/news/2010/01/23/09/2010012309165814.jpg.cs代码：
protected void Button1_Click(object sender, EventArgs e)
{
string filename = fu.FileName;//获取上传的文件名
/*******************
此处为文件上传的具体操作，代码略
********************/
//如果上传成功就调用setfile()这个js方法，此方法的功能很简单，一看就明白了
ClientScript.RegisterStartupScript(typeof(string), "", "<script>setfile('" + filename + "')</script>");
}
好了这个页面搞定了，下面就好办了。
我们再建立一个页面名为FileUpTest.aspx代码如下：
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>文件无刷新上传</title>
<script type="text/javascript" src="/images/uploads/news/2010/01/23/09/201001230916471.jpg"></script>
<script type="text/javascript">
function sethds()
{
var filename = frames["fileframe"].getfilename();
$("#hds").val(filename);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<iframe src="/images/uploads/news/2010/01/23/09/2010012309165814.jpg" name="fileframe" width="587px" height="31px" scrolling="no" frameborder="0" marginheight="0" marginwidth="0" hspace="0" vspace="0" border="0"></iframe>
<br /> 会刷新的上传：<asp:FileUpload ID="FileUpload1" runat="server" /><asp:Button ID="Button3" runat="server" Text="upFile" OnClick="Button3_Click" />
<p onclick="$(this).hide()">先点击我，让我消失后再开始上传。如果上传后我出现了，表示刷新影响到了本页面，反之则没有刷新</p>
<br />
<input id="Button1" type="button" value="sethd" onclick="sethds()"/><%--从iframe的页面中取文件名，设置到此页面的hidden--%>
<input id="Button2" type="button" value="gethd" onclick="alert($('#hds').val())"/><%--从本页面的hidden中取出上传的文件名--%>
<asp:HiddenField ID="hds" runat="server" />
</div>
</form>
</body>
</html>
其中id为Button1的按钮是用来设置id为hds的hidden控件的值，id为Button2的按钮是用来获取hidden的值，关键就在Button1上了，Button1使用的sethds()方法中的frames["fileframe"].getfilename();这句其实是调用的/images/uploads/news/2010/01/23/09/2010012309165814.jpg这个页面上的getfilename();方法，此方法直接获取了/images/uploads/news/2010/01/23/09/2010012309165814.jpg中hidden的值，而那个值就是我们上传成功后设置的文件名，因为/images/uploads/news/2010/01/23/09/2010012309165814.jpg是放在FileUpTest.aspx页面的iframe中的所以整个页面的刷新是不会出现。
至此一个无刷新上传就完成了。
- 上一篇：ASP.NET弹出对话框并跳转页面
- 下一篇：ASP.NET表单介绍
![百鸣[Baiming.org]欢迎您](/images/hi.jpg)
百鸣[Baiming.org]欢迎您~