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

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

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

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

 

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

Code

可以看到这里主要是把file控件放入到Files中,并执行附加函数onIniFile,我是这样定义这个函数的:

onIniFile: function(file){ file.value ? file.style.display = "none" : this.Folder.removeChild(file); }

这里为了实现单file控件,把原来有值的file都隐藏了,还有那个“单file控件”呢?
别急,接着就在文件空间插入一个新的file控件:

Code

可以看到file控件的name是FileName属性的值,默认是空的,如果服务器端需要这个name的话就可以设置。
这里可以看到每个file控件都有onchange来执行检测函数Check,这样每次选择文件后都会用Check检测一次,这里说说这个Check函数:

Code

里面有一个检测变量bCheck,然后进行空值、文件数限制、后缀名、相同文件的检测,当其中一个步骤不通过bCheck就会设为false,一个常用的检测结构。
这里说说检测后缀名,由于js不能像后台那样获取文件的文件类型,所以只能根据后缀名来判断,例如用正则判断:

/\.(jpg|gif)$/i.test(file.value)

这样判断显然是不够的,所以如果要做文件类型判断的话一定要在后台用ContentType再判断一次。
最后如果没有通过检测就会执行onFail函数:

!bCheck && this.onFail(file);

我在onFail函数中设定了移除没有通过检测的file控件:

onFail: function(file){ this.Folder.removeChild(file); }


这样就基本实现(正确的说是模拟)了单file控件上传多个文件的效果了。

 

2
0

.NET技术热门文章

    .NET技术最新文章

      最新新闻

        热门新闻