首页 > 语言 > 关键词 > 文件上传最新资讯 > 正文

简便无刷新文件上传系统

2009-12-01 10: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之前加载完毕,所以触发了两次。如果在插入body之前给iframe随便设置一个src(除了空值),间接加长第一次加载,那么也只触发一次了。ps:不设置或空值的src相当于链接到“about:blank”(空白页)。

那么opera, ff和ie可能是第一次加载太慢,第二次覆盖了第一次的,所以只触发了一次onload。ps:也可能是其他原因,例如浏览器优化之类的,我也不确定。

针对加载过快的问题,可以在onload的时候根据_sending确定之前是否上传状态来解决。虽然没测试出来,会不会有_sending设置之后submit之前刚好触发第一次onload的情况呢?
针对这个问题,在upload方法中会把_sending放在submit之后设置。那如果在submit之后_sending设置之前就触发了onload呢?(...囧)这个情况基本不会出现,如果真的出现,就把_sending设置放到submit前面吧。

opera还有一个麻烦的问题,测试下面代码:

以下为引用的内容:
<body>
<div id="msg">状态:</div>
<form action="http://cloudgamer.cnblogs.com/" target="ifr">
</form>
</body>
<script>
var msg = document.getElementById("msg");
var iframe = document.createElement("iframe");
iframe.name 
= "ifr";
iframe.onload 
= function(){ msg.innerHTML += "onload,"; }
document.body.appendChild(iframe);
msg.innerHTML 
+= "submit,";
document.forms[
0].submit();
</script>

ie和ff显示submit,onload,safari和chrome显示的是onload,submit,onload,跟上面的分析一致。而opera却显示submit,onload,onload,两次onload都是在submit之后触发的。这个情况就不能单纯用_sending来解决了。是不是submit不能使iframe取消加载呢?在appendChild之前设一个src,结果正常的只触发onload一次,看来是可以的啊。

虽然不知道原因,办法还是有的,一个是appendChild前设一个src,还可以在第一次onload中重新设置onload,像程序那样。但这两个方法都存在不确定性,不能完全解决问题,但也找不到更好的方法了。

ff的onload还有一个问题,在出现ERROR_INTERNET_CONNECTION_RESET(文件大小超过服务器限制)之类的服务器错误时,即使加载完成也不会触发onload,暂时找不到解决办法。

iframe有一个缺陷是只能用onload判断加载完成,但没有办法判断是否加载成功。没有类似XMLHTTP的status的东西,遇上404之类的错误也没办法判别出来。在使用时要做好这方面的处理,例如说明允许上传文件大小,超时时间,如何处理长时间无响应等。

  • 相关推荐
  • 大家在看
  • 快手小店上传商品审核不通过解决办法

    很多人想必都碰到过在快手小店上上传商品显示审核不通过的情况,那么遇到这样的情况到底应该怎么办呢?下面就来为大家分享一下快手小店上传商品审核不通过解决办法。

  • 用户B站上传《我不是药神》纯音频被判侵权

    因用户在bilibili网站上传《我不是药神》电影的纯音频,上海宽娱数码科技有限公司(B站)被优酷以侵害信息网络传播权为由诉至北京互联网法院。法院一审认定,宽娱公司构成帮助侵权。宽娱公司于判决生效之日起十日内赔偿优酷公司经济损失 60000 元和合理开支 5000 元。

  • 百度图宣布为地摊聚集区开辟POI(地点信息)上传绿色通道

    DoNews 6月4日消息(记者 程梦玲)6月3日,百度图宣布,为地摊聚集区开辟POI(地点信息)上传绿色通道,大幅简化上传摊点聚集区位置、图片等信息内容流程,更易操作,更快通过。地摊聚集区的摊主只需打开百度地图APP,点击首页“上报”,选择新增地点,提供地摊聚集区所属位置、经营时的现场照片等,审核通过后消费者即可通过百度地图导航至地摊聚集区。这也就意味着,地图用户再查询目的地时,除了能导航至常规的店面之外,今后还能

  • B站因用户上传《我不是药神》纯音频被判帮助侵权:赔偿6.5万元

    据北京互联网法院给出的通告,因用户在bilibili网站上传《我不是药神》电影的纯音频,上海宽娱数码科技有限公司被优酷信息技术(北京)有限公司以侵害信息网络传播权为由诉至北京互联网法院。

  • B站因用户上传电影纯音频被判帮助侵权 需赔偿6.5万元

    因用户在bilibili网站上传《我不是药神》电影的纯音频,上海宽娱数码科技有限公司(以下简称宽娱公司)被优酷信息技术(北京)有限公司(以下简称优酷公司)以侵害信息网络传播权为由诉至北京互联网法院。

  • 百度地图新增摊位上传绿色通道 用户使用地图可直接导航至地摊前

    要说当下最火的一个热词,想必就是”地摊经济“了。各行各业都在探索”地摊经济+某某“的全新市场模式。除了有不少网友再朋友圈晒起了自己的摆摊计划,还有毕业生称,作为

  • 靳东旗下影视文化工作室申请简易注销

    DoNews 6月9日消息(记者 吴丽)天眼查数据显示,6月8日,上海靳申影视文化工作室申请简易注销,简易注销公告期为2020-06-08至2020-06-28。该公司由知名演员靳东全资持股,成立时间为2017年8月,经营范围包括影视文化艺术活动交流策划,舞台艺术造型策划,文学创作,企业营销策划,展览展示服务等。值得一提的是,目前,靳东已注销其全资持股的多家影视文化工作室,包括上海靳东影视文化工作室、永康靳东影视文化工作室、东阳靳东?

  • 和平精英哈密瓜在哪刷新 和平精英哈密瓜刷新位置汇总

    和平精英中的清爽夏日宝箱必须用哈密瓜进行兑换,但是很多人还不清楚哈密瓜到底在哪拾取,下面就来为大家分享一下和平精英的哈密瓜刷新位置。

  • 网易上市首日高开8.13% 富途暗盘涨超7%每手赚870港元!

    富途资讯 6 月 11 日消息,本周四$网易-S(09999.HK)$上市首日高开8.13%,报 133 港元,盘前成交额高达9. 12 亿港元。截至当日11:00,网易股价市值已成功突破 4500 亿港元。而在前一日的暗盘交易中,富途暗盘开报128. 8 港元,最高涨幅接近9%,后续涨幅在7%左右波动,最终收报131. 7 港元,较招股价涨7.07%,每手卖出可赚 870 港元,远高于其他券商平台。网易-其他券商暗盘vs富途暗盘盘中表现说到这肯定会有人问,为什么富途的暗盘?

  • Epic怎么验证本地游戏文件

    在电脑上如果安装了一些游戏,想要让Epic检测扫描到,需要进行什么样的操作,才可以让本地的游戏被发现呢,这里我们来看下Epic平台上本地游戏被扫描到的具体方法。

  • 2020税后工资计算器,高效算薪简单易上手i薪税

    税后工资计算即税前工资扣除五险一金中的个人交纳部分、个人所得税后,实际到手的工资收入。社会保险中的个人交纳部分、住房公积金中的个人交纳部分是税前列支的。因此,税后工资计算是多少,公司实际发放的工资就是多少,不需要再另外扣费用,税后工资指的就是实际发放的工资。那么,是否有好用的2020税后工资计算器可以使用呢?笔者所在企业HR一直在用i薪税,其中,i薪税自带的2020税后工资计算器不仅可以快速计算税后工资,还支

  • 好看视频缓存在哪个文件夹

    好看视频中,如果你看了很多视频的话,其实都会产生缓存的,如果长期的不清理缓存的话,会占用你手机越来越多的存储空间,所以很多人想知道好看视频的缓存文件在哪,下面就来为大家详细的介绍一下。

  • 刷新业界记录 vivo TWS Neo支持88ms超低延时

    作为在6月1日vivo夏季新品发布会上正式亮相的产品,vivo TWS Neo真无线耳机一直是最近音频市场上的焦点。这款售价为499元的真无线耳机主打好音质和低延迟,搭载的14.2mm超大单元可以带来澎湃的声音表现;而搭配vivo最新影像旗舰手机X50后,更是可以实现88ms超低延迟,无论是游戏还是追剧,都可以做到音画同步,大大提升用户使用感受。对于一款真无线耳机来说,限于产品体积、使用环境、腔体和电池等诸多因素的影响,绝大多数的真无

  • iOS13.6Beta2描述文件下载 苹果iOS13.6开发版描述文件在哪下载

    iOS13.6Beta2在6月10日正式推送了,此次版本更新的内容不是很多,一些朋友想更新到iOS13.6开发者版,下面就来为大家分享一下iOS13.6Beta2 描述文件下载。

  • 盘点 227 件商品,找到了刘涛刷新明星带货记录的原因

    2020 年即将过半,还有哪位明星没有进过直播间?618 年中大促到来,平台们除了玩法和优惠的比拼,也把明星拉入了这场“battle”。天猫 618 直播请来“半个娱乐圈”,近 300 位明星轮番值班上阵。当大量明星涌入,明星直播带货的玩法势必会变得多元。作为主动引入明星的平台,也需要思考:明星来了,然后呢?5 月 14 日,刘涛以聚划算官方优选官的身份,开启了她的主播生涯,迄今为止已经完成 4 场直播。刘涛的直播,因为开创了明星

  • 怎样恢复SD卡删除文件?四个步骤轻松找回

    怎样恢复SD卡删除文件?四个步骤轻松找回!SD卡在目前的生活中,具有携带方便,存储容量大的优势而赢得了很多用户的喜爱,但是也有很多用户在使用过程中往往也都会不小心把SD卡格式化,当数据丢失后,我们又该如何找回呢?毕竟SD卡不同于其它存储设备,所删除的不会像电脑一样可以通过回收站的形式进行找回。只能借助一些专业的SD卡数据恢复工具进行找回。那么对于这些误删除的文件来说,当数据丢失后,我们又该如何找回呢?怎样才能找

  • iOS 14预览版险提前泄漏:苹果迅速撤回相应文件

    据外媒报道称,今天早些时候有一些开发者发现,苹果悄然发布了iOS 14 Developer Beta开发者预览升级的描述文件,不过最后时刻官方撤回了这个文件,防止新系统提前泄露。按照开发者的说法,iOS

  • iOS13.6Beta3开发者版描述文件下载地址 苹果ios13.6描述文件在哪下载

    苹果iOS13.6开发者预览版Beta3的版本发布了,这个版本主要是修复了一些bug和提高了性能,一些小伙伴还不知道在哪可以下载iOS13.6开发者预览版Beta3的描述文件,下面就来为大家分享一下下载的地址。

  • ios14开发者预览版及公测版描述文件下载地址 iOS14描述文件在哪下载

    苹果WWDC2020全球开发者大会上,苹果正式公布了iOS14,很多人都想在第一时间尝试iOS14的版本,一些小伙伴还不清楚iOS14的描述文件在哪下载,下面就来为大家分享一下。

  • 官方回应微信朋友圈无法刷新 附官方回应全文

    另外,在去年 6 月 5 日,微信添加好友等功能出现的故障,腾讯回应称,下午微信部分功能出现短暂故障,微信登录、用户消息会话、公众号、小程序、外部链接等功能均受到不同程度的影响,影响时长约为 5 到 20 分钟,波及小部分用户。目前,各项功能已经完全修复。

  • 参与评论
文明上网理性发言,请遵守新闻评论服务协议