Javascript & DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例


Posted in Javascript onJune 02, 2007

效果DEMO:
http://www.never-online.net/tutorial/js/upload/
Javascript & DHTML 实例编程(教程)(三),初级实例篇—上传文件控件实例
上章基本上把要交代的基本知识都说了一些,今天终于开始写代码了:D
首先来做一个实例,批量上传的UI控件。以后一般做的示例也是以UI控件为主的。都是封装成Object或者用Function封装成"Class"类。

也许对于单单看前几章的朋友来说这个例子过于深奥了,但是不用担心,一步步来解释应该很快理解的,关键是理解怎么做,而不是怎么写。

如果还有不懂的朋友,可以留言给我。
首先看一个成品截图预览:

Javascript & DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例

一、接下来我们先说思路,首先定义一个upload"类",

一)、这个类的公共访问信息应该有:
1、构造函数中要传递一些必要的参数,比如,在哪个容器构造upload的信息。
2、必须有一个add()方法,用于添加一个upload
3、必须有一个remove()方法,用于删除一个upload

二)、这个类中应该有一些必要的信息,是生成实例本身所具有的信息,(upload对象的一些信息)。
1、得到一共多少个upload信息,
2、一个容器对象,这个对象也是从构造函数中传递。

整个图可以简单的表示为

Javascript & DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例

二、我想我们该想想应该用到哪些知识,哪些是熟悉的,哪些是未知的。

一)、正如我们上面预览图所见到的,需要三个或以上的新控件。(添加,删除,还有一个file控件,也或者还有其它的...但至少眼睛见到的就这么多了),既然是新的信息,就会可能用到document.createElement,要添加进一个容器里就可能用到object.appendChild(obj)或者obj.insertBefore()方法。删除也就是obj.parentNode.removeChild(obj)。这些上一章都已经说过了。

二)、既然是控件,肯定得用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>

二、写出add方法的实现

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

  /* 计数器+1 */
  this._cnt++;

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

三、写出remove方法的实现

<script>
upload.prototype.remove = function (n) {
  /*
   *删除一个 file
   */
  var a = document.getElementById("upload_file_" +n);
  a.parentNode.removeChild(a);
  /*
   *删除一个 添加
   */
  var a = document.getElementById("upload_add_" +n);
  a.parentNode.removeChild(a);
  /*
   *删除一个 删除
   */
  var a = document.getElementById("upload_remove_" +n);
  a.parentNode.removeChild(a);

  return this;
}
</script>

上面remove方法过于重复,可考虑重新把remove再简化,从而使我们的代码更简短而且易于维护呢?在这里,我们把这个通用功能放到一个函数里,也就是多加一个函数:

<script>
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>

四、将代码组合一下,基本上可以算是完成了:D

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

  /* 计数器+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>

五、OK,让我们运行一下这个控件:

<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美化一下,最后的代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <title> upload control - http://www.never-online.net </title>
 <style type="text/css" media="all" title="Default">
      * { font-family:Arial; }
      body { font-size:10pt; }
      h1 { }
      #footer { font-size:9pt; margin:20px; }
      span { margin: 3px; text-decoration:underline; cursor:default; }
 </style>
 <script type="text/javascript">
 //<![CDATA[

    function upload(target) {
      this._cnt = 0; 
      this.target = document.getElementById(target);
    };

    upload.prototype.add = function () {

      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);
      this._cnt++;

      return this;
    };

    upload.prototype._removeNode = function (id) {
      var a=document.getElementById(id);
      a.parentNode.removeChild(a);
    };

    upload.prototype.remove = function (n) {
      this._removeNode("upload_file_" +n);
      this._removeNode("upload_add_" +n);
      this._removeNode("upload_remove_" +n);
      return this;
    };

    onload = function () {
      var o = new upload("container");
      o.add();
    };
 //]]>
 </script>
 </head>
 <body id="www.never-online.net">
    <h1> batch upload control with javascript </h1>
    <div id="container"></div>
    <div id="footer">tutorial of DHTML and javascript programming, Power By never-online.net</div>
 </body>
</html>

Javascript 相关文章推荐
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
Apr 20 Javascript
Javascript判断图片尺寸大小实例分析
Jun 16 Javascript
javascript实现左右控制无缝滚动
Dec 31 Javascript
JS模拟并美化的表单控件完整实例
Aug 19 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
Sep 04 Javascript
jQuery EasyUI之验证框validatebox实例详解
Apr 10 jQuery
详解Angular4中路由Router类的跳转navigate
Jun 09 Javascript
Vue开发之封装分页组件与使用示例
Apr 25 Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
Oct 21 Javascript
JS控制下拉列表左右选择实例代码
May 08 Javascript
Node登录权限验证token验证实现的方法示例
May 25 Javascript
js实现有趣的倒计时效果
Jan 19 Javascript
Javascript &amp; DHTML 实例编程(教程)DOM基础和基本API
Jun 02 #Javascript
Javascript &amp; DHTML 实例编程(教程)基础知识
Jun 02 #Javascript
把JS与CSS写在同一个文件里的书写方法
Jun 02 #Javascript
JavaScript 不只是脚本
May 30 #Javascript
JCalendar 日历控件 v1.0 beta[兼容IE&amp;Firefox] 有文档和例子
May 30 #Javascript
[原创]站长必须要知道的javascript广告代码
May 30 #Javascript
JSON 学习之完全手册 图文
May 29 #Javascript
You might like
台湾中原大学php教程孙仲岳主讲
2008/01/07 PHP
php中3种方法删除字符串中间的空格
2014/03/10 PHP
PHP实现数据库统计时间戳按天分组输出数据的方法
2017/10/10 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
类之Prototype.js学习
2007/06/13 Javascript
jQuery中与toggleClass等价的程序段 以及未来学习的方向
2010/03/18 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
2014/04/15 Javascript
JavaScript 学习笔记之数据类型
2015/01/14 Javascript
如何减少浏览器的reflow和repaint
2015/02/26 Javascript
原生js实现移动开发轮播图、相册滑动特效
2015/04/17 Javascript
jQuery固定元素插件scrolltofixed使用指南
2015/04/21 Javascript
详解使用React全家桶搭建一个后台管理系统
2017/11/04 Javascript
CentOS环境中MySQL修改root密码方法
2018/01/07 Javascript
Node.js模块全局安装路径配置方法
2018/05/17 Javascript
React中this丢失的四种解决方法
2019/03/12 Javascript
vue列表单项展开收缩功能之this.$refs的详解
2019/05/05 Javascript
微信小程序实现搜索功能
2020/03/10 Javascript
javascript利用键盘控制小方块的移动
2020/04/20 Javascript
Node.js API详解之 module模块用法实例分析
2020/05/13 Javascript
python实现simhash算法实例
2014/04/25 Python
Python实现网络端口转发和重定向的方法
2016/09/19 Python
用 Python 爬了爬自己的微信朋友(实例讲解)
2017/08/25 Python
pygame游戏之旅 添加icon和bgm音效的方法
2018/11/21 Python
Python 实现黑客帝国中的字符雨的示例代码
2020/02/20 Python
Keras - GPU ID 和显存占用设定步骤
2020/06/22 Python
css3 box-sizing属性使用参考指南
2013/01/08 HTML / CSS
关于HTML5的22个初级技巧(图文教程)
2012/06/21 HTML / CSS
html5超简单的localStorage实现记住密码的功能实现
2017/09/07 HTML / CSS
意大利火车票和铁路通行证专家:ItaliaRail
2019/01/22 全球购物
新教师培训方案
2014/06/08 职场文书
2015年度企业工作总结
2015/05/21 职场文书
军训后的感想
2015/08/07 职场文书
2019年最新感恩节祝福语(28句)
2019/11/27 职场文书
python爬取网页版QQ空间,生成各类图表
2021/06/02 Python
Redis 彻底禁用RDB持久化操作
2021/07/09 Redis
springboot入门 之profile设置方式
2022/04/04 Java/Android