JavaScript批量上传UI控件实现详解

JavaScript批量上传UI控件实现详解

上一章已涵盖基础知识点，本章正式进入代码实现阶段。我们将以构建一个批量上传的UI控件为例进行演示，后续示例也将主要围绕封装为Object或使用Function模拟“Class”类的UI控件展开。对于仅阅读前几章的读者，此例可能略显复杂，但请不必担心，我们将逐步拆解。重点在于理解实现逻辑而非单纯记忆代码。首先预览成品效果： 一、设计思路：定义一个名为“upload”的类。 一)、该类需公开以下访问信息： 1. 构造函数需接收必要参数，例如指定生成upload控件的容器。 2. 必须包含add()方法，用于添加一个新的上传项。 3. 必须包含remove()方法，用于删除一个上传项。 二)、实例本身需维护以下内部信息： 1. 记录当前上传项的总数。 2. 存储从构造函数传入的容器对象引用。 整体结构可简化表示为： 二、所需知识点分析： 一)、从预览图可见，至少需要三个新控件：添加按钮、删除按钮以及文件选择控件（file input）。涉及新知识时，可能会用到document.createElement来创建元素，将元素加入容器需使用object.appendChild(obj)或obj.insertBefore()方法，删除则通过obj.parentNode.removeChild(obj)实现。这些DOM操作在上一章已有介绍。 二)、作为控件，必须使用function或object进行封装，这部分基础知识已在第一章简述。 三)、组织结构已在上述思路的文字和图示中体现。 接下来开始编写代码： 一）、构造函数及基本代码（伪代码）

 
<script>
function upload(target/*容器*/
                )  
{  
this._cnt = 0; /*计数器*/
this.target = document.getElementById(target);
};  
upload.prototype.add = function () {
  /*  
*生成一个 file
*生成一个 添加
*生成一个 删除
*计数器+1
   */  
};  
upload.prototype.remove = function () {
  /*  
*删除一个 file
*删除一个 添加
*删除一个 删除
   */  
};  
</script>