网上有很多无刷新文件上传的代码,看了很多感觉都比较复杂,有些封装的很好但是又缺乏了灵活性,个人觉得其实无刷新文件上传并不麻烦,所以写下此文供大家参考批评。
好了闲话不多说,现在我们现在就从头来实现一个无刷新文件上传的功能。
首先建立一个名为FileUpIframe.aspx的页面,代码如下(注:本文中的js全部采用jQuery操作):
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<script type="text/javascript" src="js/jquery.min.js"></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>
以下是FileUpIframe.aspx.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="js/jquery.min.js"></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="FileUpIframe.aspx" 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();这句其实是调用的FileUpIframe.aspx这个页面上的getfilename();方法,此方法直接获取了FileUpIframe.aspx中hidden的值,而那个值就是我们上传成功后设置的文件名,因为FileUpIframe.aspx是放在FileUpTest.aspx页面的iframe中的所以整个页面的刷新是不会出现。
至此一个无刷新上传就完成了。