欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Javascript & DHTML上傳文件控件

 更新時間:2008年07月03日 21:46:31   作者:  
首先來做一個實例,批量上傳的UI控件。以后一般做的示例也是以UI控件為主的。都是封裝成Object或者用Function封裝成"Class"類。

五、OK,加上相關(guān)的html代碼就好了: 
復(fù)制代碼 代碼如下:

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



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

我們這里添加一個容器,如果以后還要加什么東西,會更好加一些,修改add: 
復(fù)制代碼 代碼如下:

<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);  

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

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



七、加上CSS美化一下,最后的代碼如下: 

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

相關(guān)文章

最新評論