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

这个仿163网盘无刷新文件上传系统,并没有用使用.NET的控件,完全的手工制作。前台基本上是静态的,跟后台没有关系,所以后台用什么语言做都可以(后面有各个版本的实例下载)。
本来觉得这个系统会很复杂,但把每个部分都分析清楚后,其实需要的技术并不高。不过当我把各个功能函数都整理好准备进行封装时,却发现要把程序封装不是那么容易,因为程序跟html的耦合度太高。然后我逐步把程序中操作html相关的部分分离出来,首先把简单的分离,接着是文件列表,然后是file控件,最后是一些提示性程序。经过几次尝试才把整个结构封装好,现在程序结构应该算比较清晰,有什么不明白的地方欢迎留言。

效果预览

上传文件
添加文件:
文件路径 
温馨提示:最多可同时上传 个文件,只允许上传 文件。
   
这里的预览只是前台的效果,要整个系统测试请下载完整实例。

程序说明

 

【无刷新上传】
要实现文件上传,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";

【多文件上传】
对于多文件上传,这里的目的是如何做到163网盘那样,只用一个file控件就实现多文件上传。
这里参考了163网盘的思路,下面说说如何实现:
首先必须有一个文件空间(我自己定的名字),例如程序中的"idFile"对象,这个空间不需要内容甚至一个div就可以,主要是用来存放file控件,程序中Folder属性就是这个文件空间对象。
ps:这里的要求是把file控件都控制在文件空间里,即使不是单file控件的情况。
再说说Files属性,这个属性放的是file控件集合,方便获取file控件,在下面“文件列表”就会用到。

 

处理这些file控件的程序主要在Ini函数中:
首先是处理文件空间中的file控件:

Code


【文件列表】
在上面的Ini函数中,最后执行了一个附加函数onIni,这个函数是用户自己定义的,我就在这个函数中添加文件列表。

 

在之前先说说添加文件列表的函数AddList,这个函数是用来把file控件的值列在一个table里面。
函数的参数是一个二维数组,其中第一维是行(tr),第二维是列(td)。
首先获取列表对象FileList,再定义一个文档碎片oFragment来操作dom:

var FileList = $("idFileList"), oFragment = document.createDocumentFragment();

【后台】

 

前台基本完成了,就到后台啦。后台的功能很简单,就是处理传递过来的文件数据。
这里像js + .NET 图片切割系统那样使用ashx文件处理IHttpHandler发送过来的数据。
程序很简单,就直接贴代码了:

Code

NET技术仿163网盘无刷新文件上传系统,转载需保留来源!

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。