快速业务通道

ASP.NET实例:无刷新的文件上传

作者 佚名技术 来源 NET编程 浏览 发布时间 2012-04-11

程序说明

【upload】

程序中最重要的方法就是upload了,调用它就可以进行无刷新上传。upload的过程是这样的,首先用stop方法停止上一次上传,并判断是否选择文件。然后分别调用_setIframe,_setForm和_setInput,生成需要的iframe,form和input。如果设置了timeout属性的话,会自动设置计时器:

以下为引用的内容:
if ( this.timeout > 0 ) {
    
this._timer = setTimeout( $F.bind(this._timeout, this), this.timeout * 1000 );
}

ps:经测试,小于0的延时时间,ie会取消执行,而其他浏览器会当成0执行。

程序有一个_sending属性用来判断上传状态。在stop(停止),remove(移除),_finis(完成),_timeout(超时)中会把它设为false。而在上传开始前要把它设置为true。最后提交表单就开始上传了。

【iframe】

程序使用_setIframe函数来创建无刷新需要的iframe。由于ie中iframe的name不能修改的问题,要这样创建iframe:  

以下为引用的内容:
var iframename = "QUICKUPLOAD_" + QuickUpload._counter++,
    iframe 
= document.createElement( $B.ie ? "<iframe name=\"" + iframename + "\">" : "iframe");
iframe.name 
= iframename;
iframe.style.display 
= "none";

ps:关于iframe的name的问题参考这里的iframe部分。ie8已经可以修改name了,但在非标准(怪辟)模式下还是不能修改。其中使用了一个QuickUpload函数自身的_counter属性做计算器,这就能保证各个实例的iframe的name就不会重复。

为了能在文件上传完成后执行回调函数,会在iframe的onload中执行_finish函数:

以下为引用的内容:
var finish = this._fFINISH = $F.bind(this._finish, this);
if ( $B.ie ) {
    iframe.attachEvent( 
"onload", finish );
else {
    iframe.onload 
= $B.opera ? function(){ this.onload = finish; } : finish;
}

在ie需要用attachEvent来绑定onload,因为在ie中直接设置onload是无效的。除了用attachEvent还可以用onreadystatechange代替。至于原因我也不清楚,详细参考“判断 iframe 是否加载完成的完美方法”。

iframe的加载还有一个问题,测试以下代码:

以下为引用的内容:
<body><div id="msg">状态:</div></body>
<script>
var msg = document.getElementById("msg");
var iframe = document.createElement("iframe");
iframe.onload 
= function(){ msg.innerHTML += "onload,"; }
document.body.appendChild(iframe);
iframe.src 
= "http://cloudgamer.cnblogs.com/"
</script>

结果safari, chrome都会触发onload两次,而opera, ff和ie(请自行兼容)都是1次。

估计在safari和chrome在appendChild之后就进行第一次加载,并且在设置src之前加

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号