|
网上有很多无刷新文件上传的代码看了很多感觉都比较复杂有些封装的很好但是又缺乏了灵活性个人觉得其实无刷新文件上传并不麻烦所以写下此文供大家参考批评 好了闲话不多说现在我们现在就从头来实现一个无刷新文件上传的功能 首先建立一个名为FileUpIframeaspx的页面代码如下（注本文中的js全部采用jQuery操作） <html xmlns= > <head runat=server> <title>无标题页</title> <script type=text/javascript src=js/jqueryminjs></script> <script type=text/javascript> function setfile(filename) { $(#hd)val(filename); alert(上传成功); } function getfilename() { return $(#hd)val(); } </script> </head> <body> <form id=form runat=server> <div> 无刷新的上传<asp:FileUpload ID=fu runat=server/><asp:Button ID=Button runat=server Text=upFile OnClick=Button_Click /> <asp:HiddenField ID=hd runat=server /> </div> </form> </body> </html> 以下是FileUpIframeaspxcs代码 protected void Button_Click(object sender EventArgs e) { string filename = fuFileName;//获取上传的文件名 /******************* 此处为文件上传的具体操作代码略 ********************/ //如果上传成功就调用setfile()这个js方法此方法的功能很简单一看就明白了 ClientScriptRegisterStartupScript(typeof(string) <script>setfile( + filename + )</script>); } 好了这个页面搞定了下面就好办了 我们再建立一个页面名为FileUpTestaspx代码如下 <html xmlns= > <head runat=server> <title>文件无刷新上传</title> <script type=text/javascript src=js/jqueryminjs></script> <script type=text/javascript> function sethds() { var filename = frames[fileframe]getfilename(); $(#hds)val(filename); } </script> </head> <body> <form id=form runat=server> <div> <iframe src=FileUpIframeaspx name=fileframe width=px height=px scrolling=no frameborder= marginheight= marginwidth= hspace= vspace= border=></iframe> <br /> 会刷新的上传<asp:FileUpload ID=FileUpload runat=server /><asp:Button ID=Button runat=server Text=upFile OnClick=Button_Click /> <p onclick=$(this)hide()>先点击我让我消失后再开始上传如果上传后我出现了表示刷新影响到了本页面反之则没有刷新</p> <br /> <input id=Button type=button value=sethd onclick=sethds()/><%从iframe的页面中取文件名设置到此页面的hidden%> <input id=Button type=button value=gethd onclick=alert($(#hds)val())/><%从本页面的hidden中取出上传的文件名%> <asp:HiddenField ID=hds runat=server /> </div> </form> </body> </html> 其中id为Button的按钮是用来设置id为hds的hidden控件的值id为Button的按钮是用来获取hidden的值关键就在Button上了Button使用的sethds()方法中的frames[fileframe]getfilename();这句其实是调用的FileUpIframeaspx这个页面上的getfilename();方法此方法直接获取了FileUpIframeaspx中hidden的值而那个值就是我们上传成功后设置的文件名因为FileUpIframeaspx是放在FileUpTestaspx页面的iframe中的所以整个页面的刷新是不会出现 至此一个无刷新上传就完成了 |
