Javascript仿163网盘无刷新文件上传系统_Javascript教程(4)_H5之家

接着创建iframe，本以为用document.createElement("iframe")创建再设置它的name属性就行了。
却发现这样设置的name在ie居然不认（有说name是只读属性），还好在网上找到一个方法：“IE 创建元素，还有一个特点，就是可以连同属性一同创建”。
例如我想给动态创建的iframe设置name，可以这样：

document.createElement("<iframe name=\"" + this._FrameName + "\">")
不过这个方式在ff会报错：
uncaught exception: String contains an invalid character (NS_ERROR_DOM_INVALID_CHARACTER_ERR)
估计是用createElement时不能带name，标准应该也是这样，所以兼容的方式这样写：

Code
var oFrame = isIE ? document.createElement("<iframe name=\"" + this._FrameName + "\">") : document.createElement("iframe");
//为ff设置name
oFrame.name = this._FrameName;
oFrame.style.display = "none";
关于这方面更详细的内容请看这里。

创建完还需要插入到body中，一般的做法是使用document.body.appendChild，但在ie中会有“已终止操作”错误，可以用下面这段代码测试：

Code
<body>
<div>
<script>
document.body.appendChild(document.createElement("div"));
</script>
</div>
</body>
网上找到一个解析：“原来FF下的实现机制是当页面还没有完全读取完时body元素就已经存在了，而IE只有页面完全读取结束body元素才会存在，所以在页面中插入上面这条语句在IE下就会出现错误”。
我在web开发未解之谜中也提到了这个现象，我这里使用了insertBefore代替：

document.body.insertBefore(oFrame, document.body.childNodes[0]);
在服务器端文件传送完（或失败）之后，怎么通知客户端呢？
这里说说我的方法，首先我在客户端定义一个函数：

function Finish(msg){ alert(msg); location.href = location.href; }
很简单，就是显示提示并重新加载页面（如果使用reload会导致ff中iframe重复加载数据）。
那服务器端如何通知客户端的问题，就是iframe如何跟主页面交互。
答案是通过window.parent或window.top，在iframe中parent和top属性“分别返回立即父窗口和最上层的祖先窗口”。
例如我在服务器端处理完数据之后会输出：

context.Response.Write("<script>window.parent.Finish('" + _msg + "');</script>");
就会执行主页面的Finish函数了。

【多文件上传】
对于多文件上传，这里的目的是如何做到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);
可以看到file控件的name是FileName属性的值，默认是空的，如果服务器端需要这个name的话就可以设置。
这里可以看到每个file控件都有onchange来执行检测函数Check，这样每次选择文件后都会用Check检测一次，这里说说这个Check函数：