您的位置:知识库 » .NET技术

仿163网盘无刷新文件上传系统

作者: cloudgamer  来源: 博客园  发布时间: 2008-11-03 11:24  阅读: 7149 次  推荐: 2   原文链接   [收藏]  
[1] 前言
[2] 无刷新上传
[3] 多文件上传
[4] 文件列表
[5] 后台

程序说明

 

【无刷新上传】
要实现文件上传,form必须设置几个属性:
1.action:设为要处理数据的页面地址;
2.method:设为"post";
3.enctype/encoding:必须设为"multipart/form-data",这里要注意的是在ie中用js修改form的enctype属性是没有效果的,只能修改encoding;

后面两个属性程序初始化时都有设置:

this.Form.method = "post";
this.Form.encoding = "multipart/form-data";


要注意这里的无刷新不是ajax哦,而是利用“古老”的iframe。
由于ajax提交数据必须先获取数据,而js(一般情况下)是不能操作客户端文件,要获取文件数据就更不用说了,所以只能用iframe来做。
先说说iframe实现无刷新上传的原理:利用form的target属性,把数据提交到页面中一个(通常为隐藏的)iframe上直观点说就是把“刷新”留给iframe。
其实原理跟一般用iframe实现无刷新提交表单是一样的,只是这里换成是文件。
这里关键就是把form的target设为iframe的name:

this.Form.target = this._FrameName;


【iframe】
如果没有自定义iframe,程序在初始化时会自动创建无刷新所需的iframe的。
首先必须选择一个iframe名,这在无刷新时是必须的,为了每个实例能创建各自的iframe,这里用了一个随机数:

this._FrameName = "uploadFrame_" + Math.floor(Math.random() * 1000);


也可以用一个递增的计算器来代替随机数。

接着创建iframe,本以为用document.createElement("iframe")创建再设置它的name属性就行了。
却发现这样设置的name在ie居然不认(有说name是只读属性),还好在网上找到一个方法:“IE 创建元素,还有一个特点,就是可以连同属性一同创建”。
例如我想给动态创建的iframe设置name,可以这样:

document.createElement(""" + this._FrameName + "\">")

不过这个方式在ff会报错:
uncaught exception: String contains an invalid character (NS_ERROR_DOM_INVALID_CHARACTER_ERR)
估计是用createElement时不能带name,标准应该也是这样,所以兼容的方式这样写:

Code

关于这方面更详细的内容请看这里

创建完还需要插入到body中,一般的做法是使用document.body.appendChild,但在ie中会有“已终止操作”错误,可以用下面这段代码测试:

Code

网上找到一个解析:“原来FF下的实现机制是当页面还没有完全读取完时body元素就已经存在了,而IE只有页面完全读取结束body元素才会存在,所以在页面中插入上面这条语句在IE下就会出现错误”。
我在web开发未解之谜中也提到了这个现象,我这里使用了insertBefore代替:

document.body.insertBefore(oFrame, document.body.childNodes[0]);

在服务器端文件传送完(或失败)之后,怎么通知客户端呢?
这里说说我的方法,首先我在客户端定义一个函数:

function Finish(msg){ alert(msg); location.href = location.href; }

很简单,就是显示提示并重新加载页面(如果使用reload会导致ff中iframe重复加载数据)。
那服务器端如何通知客户端的问题,就是iframe如何跟主页面交互。
答案是通过window.parent或window.top,在iframe中parent和top属性“分别返回立即父窗口和最上层的祖先窗口”。
例如我在服务器端处理完数据之后会输出:

context.Response.Write(" ");

就会执行主页面的Finish函数了。

 

2
0

.NET技术热门文章

    .NET技术最新文章

      最新新闻

        热门新闻