Javascript & DHTML上传文件控件第3/4页
更新时间:2008年07月03日 21:46:31 作者:
首先来做一个实例,批量上传的UI控件。以后一般做的示例也是以UI控件为主的。都是封装成Object或者用Function封装成"Class"类。
上面remove方法过于重复,可考虑重新把remove再简化,从而使我们的代码更简短而且易于维护呢?在这里,我们把这个通用功能放到一个函数里,也就是多加一个函数:
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
四、将代码组合一下,基本上可以算是完成了:D
复制代码 代码如下:
<script>
function upload(target/*容器*/
)
{
this._cnt = 0; /*计数器*/
this.target = document.getElementById(target);
};
upload.prototype.add = function () {
/*
*生成一个 file
*/
var self = this; var cnt = this._cnt;
var cFile = document.createElement("input");
cFile.type="file"; cFile.name="upload";
cFile.id = "upload_file_" +cnt;
/*
*生成一个 添加
*/
var cAdd = document.createElement("span");
cAdd.innerHTML="添加";
cAdd.onclick = function () {
self.add();
};
/*
*生成一个 删除
*/
var cRemove = document.createElement("span");
cRemove.innerHTML="删除";
cRemove.onclick = function () {
self.remove(cnt);
};
cAdd.id = "upload_add_" +cnt;
cRemove.id = "upload_remove_" +cnt;
/* 把所有生成的信息添加到容器中 */
this.target.appendChild(cFile);
this.target.appendChild(cAdd);
this.target.appendChild(cRemove);
/* 计数器+1 */
this._cnt++;
return this; //返回
};
upload.prototype._removeNode = function (id) {
var a=document.getElementById(id);
a.parentNode.removeChild(a);
};
upload.prototype.remove = function (n) {
/*
*删除一个 file
*/
this._removeNode("upload_file_" +n);
/*
*删除一个 添加
*/
this._removeNode("upload_add_" +n);
/*
*删除一个 删除
*/
this._removeNode("upload_remove_" +n);
return this;
}
</script>
相关文章
innerHTML 和 getElementsByName 在IE下面的bug 的解决
innerHTML 真的一个麻烦的东西。IE 和 firefox 对dom 处理的方式不是很一样。IE 对动态加载的很多dom 不支持动态更新。2010-04-04
JavaScript语法 JSON序列化之stringify实例详解
这篇文章主要为大家介绍了JavaScript语法 JSON序列化之stringify实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2022-10-10


最新评论