脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js dhtml 上传文件

Javascript & DHTML上传文件控件

 更新时间：2008年07月03日 21:46:31   作者：  
首先来做一个实例，批量上传的UI控件。以后一般做的示例也是以UI控件为主的。都是封装成Object或者用Function封装成"Class"类。

五、OK，加上相关的html代码就好了： 
复制代码 代码如下:

<html>  
<head>  
<script>  
//这里是上面我们写的控件代码，这里由于篇幅，我就不再贴了  
</script>  
</head>  
<body>  
<div id="uploadContainer"></div>  
<script>  
var o=new upload("uploadConainer");  
o.add();  
</script>  
</body>  
</html> 



六、嗯，已经看到效果了吧，但似乎不太理想，全部添加的都粘在一起了，有必要要美化一下。从何处入手？这里可以有很多选择： 
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++;  

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



七、加上CSS美化一下，最后的代码如下： 

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

相关文章

最新评论