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

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

 2010-09-14 13:25:05 来源:WEB开发网   
核心提示: 【多文件上传】对于多文件上传,这里的目的是如何做到163网盘那样,仿163网盘无刷新文件上传系统(4),只用一个file控件就实现多文件上传,这里参考了163网盘的思路,我是这样定义这个函数的:onIniFile: function(file){ file.value ? file.sty

【多文件上传】

对于多文件上传,这里的目的是如何做到163网盘那样,只用一个file控件就实现多文件上传。

这里参考了163网盘的思路,下面说说如何实现:

首先必须有一个文件空间(我自己定的名字),例如程序中的"idFile"对象,这个空间不需要内容甚至一个div就可以,主要是用来存放file控件,程序中Folder属性就是这个文件空间对象。

ps:这里的要求是把file控件都控制在文件空间里,即使不是单file控件的情况。

再说说Files属性,这个属性放的是file控件集合,方便获取file控件,在下面“文件列表”就会用到。

处理这些file控件的程序主要在Ini函数中:

首先是处理文件空间中的file控件:

Code

this.Files = [];
//整理文件空间,把有值的file放入文件集合
Each(this.Folder.getElementsByTagName("input"), Bind(this, function(o){
  if(o.type == "file"){ o.value && this.Files.push(o); this.onIniFile(o); }
}))

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

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

这里为了实现单file控件,把原来有值的file都隐藏了,还有那个“单file控件”呢?

别急,接着就在文件空间插入一个新的file控件:

Code

var file = document.createElement("input");
file.name = this.FileName; file.type = "file"; file.onchange = Bind(this, function(){ this.Check(file); this.Ini(); });
this.Folder.appendChild(file);

上一页  1 2 3 4 5 6 7 8 9  下一页

Tags:网盘 刷新 文件

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