知识大全无刷新文件上传的简单实现

Posted 2022-07-17 知

篇首语：我要做的绝不止此。我不是寻求者。我要为自己创造一个属于自己的太阳！本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全无刷新文件上传的简单实现相关的知识，希望对你有一定的参考价值。

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

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

　　首先建立一个名为FileUpIframe aspx的页面代码如下（注本文中的js全部采用jQuery操作）

　　< xmlns= >

　　function setfile(filename)

　　$( #hd ) val(filename);

　　alert( 上传成功 );

　　function getfilename()

　　return $( #hd ) val();

　　</script>

　　</head>

　　<body>

　　<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>

　　</>

　　以下是FileUpIframe aspx cs代码

　　protected void Button _Click(object sender EventArgs e)

　　string filename = fu FileName;//获取上传的文件名

　　/*******************

　　此处为文件上传的具体操作代码略

　　********************/

　　//如果上传成功就调用setfile()这个js方法此方法的功能很简单一看就明白了

　　ClientScript RegisterStartupScript(typeof(string) <script>setfile( + filename + )</script> );

　　好了这个页面搞定了下面就好办了

　　我们再建立一个页面名为FileUpTest aspx代码如下

　　< xmlns= >

　　<title>文件无刷新上传</title>

　　function sethds()

　　var filename = frames[ fileframe ] getfilename();

　　$( #hds ) val(filename);

　　</script>

　　</head>

　　<body>

　　<div>

　　<br /> 会刷新的上传 <asp:FileUpload ID= FileUpload runat= server /><asp:Button ID= Button runat= server Text= upFile OnClick= Button _Click />

　　<p onclick= $(this) hide() >先点击我让我消失后再开始上传如果上传后我出现了表示刷新影响到了本页面反之则没有刷新</p>

　　<br />

　　<asp:HiddenField ID= hds runat= server />

　　</div>

　　</form>

　　</body>

　　</>

　　其中id为Button 的按钮是用来设置id为hds的hidden控件的值 id为Button 的按钮是用来获取hidden的值关键就在Button 上了 Button 使用的sethds()方法中的frames[ fileframe ] getfilename();这句其实是调用的FileUpIframe aspx这个页面上的getfilename();方法此方法直接获取了FileUpIframe aspx中hidden的值而那个值就是我们上传成功后设置的文件名因为FileUpIframe aspx是放在FileUpTest aspx页面的iframe中的所以整个页面的刷新是不会出现

cha138/Article/program/net/201311/12423

知识大全 无刷新文件上传的简单实现

知识大全无刷新文件上传的简单实现