Javascript & DHTML上傳文件控件第3/4頁

更新時間：2008年07月03日 21:46:31 作者：

首先來做一個實例，批量上傳的UI控件。以后一般做的示例也是以UI控件為主的。都是封裝成Object或者用Function封裝成"Class"類。

上面remove方法過于重復，可考慮重新把remove再簡化，從而使我們的代碼更簡短而且易于維護呢？在這里，我們把這個通用功能放到一個函數(shù)里，也就是多加一個函數(shù)：

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

四、將代碼組合一下，基本上可以算是完成了:D

復制代碼代碼如下:

 
<script>  
function upload(target/*容器*/  
                )  
{  
  this._cnt = 0; /*計數(shù)器*/  
  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);  

  /* 計數(shù)器+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>  