当前位置导航:炫浪网>>网络学院>>网页制作>>ASP.NET教程

无刷新文件上传的简单实现

  网上有很多无刷新文件上传的代码,看了很多感觉都比较复杂,有些封装的很好但是又缺乏了灵活性,个人觉得其实无刷新文件上传并不麻烦,所以写下此文供大家参考批评。

  好了闲话不多说,现在我们现在就从头来实现一个无刷新文件上传的功能。

  首先建立一个名为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中的所以整个页面的刷新是不会出现。

  至此一个无刷新上传就完成了。

相关内容
赞助商链接