仿163网盘无刷新文件上传系统
2010-09-14 13:25:05 来源:WEB开发网【多文件上传】
对于多文件上传,这里的目的是如何做到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);
更多精彩
赞助商链接