快捷導(dǎo)航

Javascript & DHTML上傳文件控件

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

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

五、OK，加上相關(guān)的html代碼就好了：

 
<html>   
<head>   
<script>   
//這里是上面我們寫的控件代碼，這里由于篇幅，我就不再貼了   
</script>   
</head>   
<body>   
<div id="uploadContainer"></div>   
<script>   
var o=new upload("uploadConainer");   
o.add();   
</script>   
</body>   
</html>  

六、嗯，已經(jīng)看到效果了吧，但似乎不太理想，全部添加的都粘在一起了，有必要要美化一下。從何處入手？這里可以有很多選擇：
1、加一個(gè)換行符<br>
2、每添加一個(gè)upload就再加一個(gè)容器div
...等

我們這里添加一個(gè)容器，如果以后還要加什么東西，會(huì)更好加一些，修改add：

復(fù)制代碼代碼如下:

 
<script>   
upload.prototype.add = function () {   
  /*   
   *生成一個(gè) 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;   
  /*   
   *生成一個(gè) 添加   
   */   
  var cAdd = document.createElement("span");   
  cAdd.innerHTML="添加";   
  cAdd.onclick = function () {   
    self.add();   
  };   
  /*   
   *生成一個(gè) 刪除   
   */   
  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);   

  /* 計(jì)數(shù)器+1 */   
  this._cnt++;   

  return this; //返回   
};   
</script>  