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

程序说明

【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之类的错误也没办法判别出来。在使用时要做好这方面的处理,例如说明允许上传文件大小,超时时间,如何处理长时间无响应等。

时间: 2024-11-01 12:53:06

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

ASP.NET与JQUERY的AJAX文件上传 视频课件+源码Demo

 以前的一个上传文字教程,有很多朋友反映只能在本地上传文件,传到服务器端后,上传不了,这次的Demo完全解决了上次的问题. ASP.NET与JQUERY的AJAX文件上传 视频课件+源码Demo 下面视频 如果你看不太清楚,请点击播放器的全屏按钮进行观看!     视频课件+源码Demo下载地址: ASP.NET与JQUERY的AJAX文件上传.rar

无组件文件上传代码实例(支持多文件上传及文件和input域混合上传)

上传|无组件 关于无组件文件上传的文章已经很多了,所以在这里我不想再解释无组件文件上传的原理.在ASP中无法将二进制文件数据直接保存成文件,所以我们一般还是利用数据库来保存用户上传的文件. 1.数据库表结构(Access):UserID:Text(保存上传文件的用户ID)FileContentType:Text(用来保存上传文件的类型,eg:"Application/msword",主要用来使用户能正确下载此文件)FileContent:OLE Object(保存文件数据) 2.HTM

无组件实现文件上传/下载

上传|无组件|下载 '==================================================================--'' 用ASP实现无组件上传/下载文件'' 功能简介 ' 将上传的文件数据保存到数据库中,可以处理表单中的多个上传文件的情况' 适用于各种数据库,使用ADO的方法连接数据库' 本示例中使用的是ACCESS数据库:zj.mdb' 表:tb_img(id int(自增列),path text(255) 保存上传文件的目录' ,fname tex

很好的上传!无组件!文件上传!包含其他文本字段!文件自动更名!简单易用!

上传|无组件 其中部分代码根据化境代码改编!!upload.htm<html> <head><meta http-equiv="Content-Language" content="zh-cn"><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><meta name="GENER

无组件实现文件上传/下载_应用技巧

' 用ASP实现无组件上传/下载文件  '  ' 功能简介   ' 将上传的文件数据保存到数据库中,可以处理表单中的多个上传文件的情况  ' 适用于各种数据库,使用ADO的方法连接数据库  ' 本示例中使用的是ACCESS数据库:zj.mdb  ' 表:tb_img(id int(自增列),path text(255) 保存上传文件的目录  ' ,fname text(250) 保存上传的文件名,type test(250) 保存上传文件的类型  ' ,img ole对象 保存上传的文件内容 

asp.net生成缩略图并支持文件上传实现代码

   代码如下 复制代码 using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Drawing; using System.IO; namespace web三层 { /// <summary> /// 显示请求图片的缩略图,以宽度100像素为最大单位 /// </summary> public class imgSmall : IHttpH

asp.net(c#)开发中的文件上传组件uploadify的使用方法(带进度条)_实用技巧

在Web开发中,有很多可以上传的组件模块,利用HTML的File控件的上传也是一种办法,不过这种方式,需要处理的细节比较多,而且只能支持单文件的操作.在目前Web开发中用的比较多的,可能uploadify(参考http://www.uploadify.com/)也算一个吧,不过这个版本一直在变化,他们的脚本调用也有很大的不同,甚至调用及参数都一直在变化,很早的时候,那个Flash的按钮文字还没法变化,本篇随笔主要根据项目实际,介绍一下3.1版本的uploadify的控件使用,这版本目前还是最新的

ASP.NET用MVC模式处理文件上传下载

如果你仅仅只有Asp.net Web Forms背景转而学习Asp.net MVC的,我想你的第一个经历或许是那些曾经让你的编程变得愉悦无比的服务端控件都驾鹤西去了.FileUpload就是其中一个,而这个控件的缺席给我们带来一些小问题.这篇文章主要说如何在Asp.net MVC中上传文件,然后如何再从服务器中把上传过的文件下载下来. 在Web Forms中,当你把一个FileUpload控件拖到设计器中,你或许没有注意到在生成的HTML中会在form标签中加入一条额外属性enctype="mu

jQuery不使用插件及swf实现无刷新文件上传_jquery

文件上传是网站常用的功能,例如附件或图片的上传功能,解决方案也有很多,我们今天介绍一种通过jQuery无刷新的文件上传方式. 首先,我们在页面中放一个form,用来上传文件: 复制代码 代码如下: <form id="myForm" method="post" action="/asyncFileUpload/UploadHandler.ashx"     enctype="multipart/form-data" ta