asp.net 简便无刷新文件上传系统(3)


<form target="ifr" action="x">
<input type="submit" value="click">
</form>
<iframe></iframe>
<script>
document.getElementById("btn").onclick = function(){
document.getElementById("ifr").onload = function(){
this.parentNode.removeChild(this);
};
}
</script>


提交后都能移除iframe,但ff还一直显示“载入中”的状态。
不过解决方法也很简单,用setTimeout设置一个延时,让iframe执行完整就可以了。
所以在dispose中是这样调用_removeIframe的:

复制代码 代码如下:


if ( $$B.firefox ) {
setTimeout($$F.bind(this._removeIframe, this), 0);
} else {
this._removeIframe();
}


至于form的移除就比较简单,在_removeForm这样处理:

复制代码 代码如下:


var form = this._form, parent = form.parentNode;
if ( parent ) {
parent.insertBefore(this.file, form); parent.removeChild(form);
}
this._form = this._inputs = null;


要判断一下parentNode,否则如果parentNode不存在的话后面的会执行出错。

【file的reset】

在实例里,有一个用来重置file控件的ResetFile函数。

重置file控件一般的办法是使所在的form执行reset,但问题是会把其他表单控件也重置了。
以前由于安全问题,file的value是不允许修改的。
但现在ff,chrome和safari可以把它设为空值来实现重置:

file.value = "";
当然其他值还是不允许的。
ps:记忆中以前是不行的,不知有没有记错。

对于opera,有一个变通的方法,利用它的type属性:

file.type = "text"; file.type = "file";
通过修改type得到的file控件,value会自动还原成空值,这样就间接把file控件清空了。
ps:利用这个方法可以间接得到文件路径,但由于变回去后值就清空了,所以没什么用。

而ie的表单控件的type设置后是不允许修改的,不能用opera的办法。
不过还是有以下方法解决:
1,新建一个form,把file插进入后reset,再移除:

复制代码 代码如下:


with(file.parentNode.insertBefore(document.createElement('form'), file)){
appendChild(file); reset(); removeNode(false);
}


好处是使用原生的reset,稳定可靠,但效率低。
ps:removeNode只有ie和opera支持,如需兼容可改用removeChild的方式。

2,利用outerHTML,重建一个file控件:

file.outerHTML = file.outerHTML;
好处是高效,但由于是新创建的file控件,之前关联的东西都丢失了。
ps:ff支持不支持outerHTML。

3,利用cloneNode,复制一个file控件:

file.parentNode.replaceChild(file.cloneNode(false), file);
跟上一个方法差不多,但效率更低。

4,利用select方法选中file控件的文本域,再进行清空:

file.select(); document.selection.clear();


file.select(); document.selection.clear();
看来没什么问题,但file必须能被select(不能是隐藏状态)。
ps:这两个方法都只能在ie使用。

由于程序中file是需要关联的,所以方法2和3都不能用。
方法4貌似也不错,但有一个致命问题,在ie测试以下代码:

复制代码 代码如下:


<form><input type="file"></form>
<script>
document.getElementById("test").onchange = function(){
this.select(); document.selection.clear();
this.form.submit();
}
</script>


执行到submit会显示“拒绝访问”的错误,原因不清楚,不知是ie故意的还是bug。

看来也只能使用方法1了:

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wjdpzg.html