WEB开发网
开发学院网页设计JavaScript 仿163网盘无刷新文件上传系统 阅读

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

 2010-09-14 13:25:05 来源:WEB开发网   
核心提示:本文示例源代码或素材下载 这个仿163网盘无刷新文件上传系统,并没有用使用.net的控件,仿163网盘无刷新文件上传系统,完全的手工制作,前台基本上是静态的,而js(一般情况下)是不能操作客户端文件,要获取文件数据就更不用说了,跟后台没有关系,所以后台用什么语言做都可以(后面有各个版本的实例下载)

本文示例源代码或素材下载

这个仿163网盘无刷新文件上传系统,并没有用使用.net的控件,完全的手工制作。前台基本上是静态的,跟后台没有关系,所以后台用什么语言做都可以(后面有各个版本的实例下载)。

本来觉得这个系统会很复杂,但把每个部分都分析清楚后,其实需要的技术并不高。不过当我把各个功能函数都整理好准备进行封装时,却发现要把程序封装不是那么容易,因为程序跟html的耦合度太高。然后我逐步把程序中操作html相关的部分分离出来,首先把简单的分离,接着是文件列表,然后是file控件,最后是一些提示性程序。经过几次尝试才把整个结构封装好,现在程序结构应该算比较清晰,有什么不明白的地方欢迎留言。

效果预览

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

这里的预览只是前台的效果,要整个系统测试请下载完整实例。

程序说明

【无刷新上传】

要实现文件上传,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来做。

1 2 3 4 5 6  下一页

Tags:网盘 刷新 文件

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接