效果DEMO:
http://www.never-online.net/tutorial/js/upload/
Javascript & DHTML 例子编程(教程)( 3)初级例子篇—上传文件Control控件例子
上章基本上把要交代基本知识都说了些今天终于开始写代码了:D
首先来做个例子批量上传UIControl控件以后般做举例也是以UIControl控件为主都是封装成Object或者用Function封装成"Class"类
也许对于单单看前几章朋友来说这个例子过于深奥了但是不用担心步步来解释应该很快理解关键是理解如何做而不是如何写
如果还有不懂朋友可以留言给我
首先看个成品截图预览:
=imgBorder alt=http://www.crazycoder.cn/WebFiles/200812/39d1c288-a216-4a25-8ec5-0d5979941e27.png src="http://www.crazycoder.cn/WebFiles/200812/39d1c288-a216-4a25-8ec5-0d5979941e27.png">

、接下来我们先说思路首先定义个upload"类",
)、这个类公共访问信息应该有:
1、构造中要传递些必要参数比如在哪个容器构造upload信息
2、必须有个add思路方法用于添加个upload
3、必须有个remove思路方法用于删除个upload
2)、这个类中应该有些必要信息是生成例子本身所具有信息(upload对象些信息)
1、得到共多少个upload信息
2、个容器对象这个对象也是从构造中传递
整个图可以简单表示为
=imgBorder alt=http://www.crazycoder.cn/WebFiles/200812/54f21600-0659-4865-ac46-d5086226a5b1.png src="http://www.crazycoder.cn/WebFiles/200812/54f21600-0659-4865-ac46-d5086226a5b1.png">

2、我想我们该想想应该用到哪些知识哪些是熟悉哪些是未知
)、正如我们上面预览图所见到需要 3个或以上新Control控件(添加删除还有个fileControl控件也或者还有其它...但至少眼睛见到就这么多了)既然是新信息就会可能用到document.createElement要添加进个容器里就可能用到object.appendChild(obj)或者obj.insertBefore思路方法删除也就是obj.parentNode.removeChild(obj)这些上章都已经说过了
2)、既然是Control控件肯定得用function或者是个对象(object)封装起来对这部分知识第章已经简单介绍说明了
3)、如何组织呢？在上面思路中也已经有了文字和图示
接下来就动手写:
)、构造以及基本代码(伪代码)

<script>
function upload(target/*容器*/
)
{
this._cnt = 0; /*计数器*/
this.target = document.getElementById(target);
};
upload.prototype.add = function {
/*
*生成个 file
*生成个 添加
*生成个 删除
*计数器+1
*/
};
upload.prototype.remove = function {
/*
*删除个 file
*删除个 添加
*删除个 删除
*/
};
</script>
2、写出add思路方法实现
<script>
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;
this; //返回
};
</script>
3、写出remove思路方法实现
<script>
upload.prototype.remove = function (n) {
/*
*删除个 file
*/
var a = document.getElementById("upload_file_" +n);
a.parentNode.removeChild(a);
/*
*删除个 添加
*/
var a = document.getElementById("upload_add_" +n);
a.parentNode.removeChild(a);
/*
*删除个 删除
*/
var a = document.getElementById("upload_remove_" +n);
a.parentNode.removeChild(a);
this;
}
</script>
上面remove思路方法过于重复可考虑重新把remove再简化从而使我们代码更简短而且易于维护呢？在这里我们把这个通用功能放到个里也就是多加个:
<script>
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);
this;
}
</script>
4、将代码组合下基本上可以算是完成了: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;
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);
this;
}
</script>
5、OK让我们运行下这个Control控件:

<html>
<head>
<script>
//这里是上面我们写Control控件代码这里由于篇幅我就不再贴了
</script>
</head>
<body>
<div id="uploadContainer"></div>
<script>
var o= upload("uploadConainer");
o.add;
</script>
</body>
</html>
6、嗯已经看到效果了吧但似乎不太理想全部添加都粘在起了有必要要美化下从何处入手？这里可以有很多选择:
1、加个换行符<br>
2、每添加个upload就再加个容器div
...等
我们这里添加个容器如果以后还要加什么东西会更好加些修改add:
<script>
upload.prototype.add = function {
/*
*生成个 file
*/
var self = this; var cnt = this._cnt;
var cWrap = document.createElement("div");
cWrap.id = "upload_wrap_" +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;
/* 把所有生成信息添加到容器中 */
cWrap.appendChild(cFile);
cWrap.appendChild(cAdd);
cWrap.appendChild(cRemove);
this.target.appendChild(cWrap);
/* 计数器+1 */
this._cnt;
this; //返回
};
</script>
7、加上CSS美化下最后代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> upload control - http://www.never-online.net </title>
<style type="text/css" media="all" title="Default">
* { font-family:Arial; }
body { font-size:10pt; }
h1 { }
#footer { font-size:9pt; margin:20px; }
span { margin: 3px; text-decoration:underline; cursor:default; }
</style>
<script type="text/javascript">
//<![CDATA[
function upload(target) {
this._cnt = 0;
this.target = document.getElementById(target);
};
upload.prototype.add = function {
var self = this; var cnt = this._cnt;
var cWrap = document.createElement("div");
cWrap.id = "upload_wrap_" +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;
cWrap.appendChild(cFile);
cWrap.appendChild(cAdd);
cWrap.appendChild(cRemove);
this.target.appendChild(cWrap);
this._cnt;
this;
};
upload.prototype._removeNode = function (id) {
var a=document.getElementById(id);
a.parentNode.removeChild(a);
};
upload.prototype.remove = function (n) {
this._removeNode("upload_file_" +n);
this._removeNode("upload_add_" +n);
this._removeNode("upload_remove_" +n);
this;
};
_disibledevent="footer">tutorial of DHTML and javascript programming, Power By never-online.net</div>
</body>
</html>