• JAVASCRIPT 多上传控件类


    我之前曾经在项目中写过JS+ASP.NET多相片上传时添加上传框的处理。
    但是,现在回头一看,我那时虽然功能上完全实现了添加过程,但是程序完全是过程化,完全是就事论事。
    如果现在需要复用或壮大的话,不得不从头再来。
    原文地址:http://www.cnblogs.com/McJeremy/archive/2008/05/22/1205007.html
    那么,如何把添加的过程封装成一个类以方便复用或壮大呢?
    本来打算自己实现一下,但是在网上看到这样一篇文章,
    来源地址:http://www.never-online.net/blog/article.asp?id=154
    我把其内容复制在这里备忘(申明:此文非本人原创,版块归源作者所有
    --------------------华丽的分割线----------------------------

    首先看一个成品截图预览:

    http://www.never-online.net/tutorial/js/upload/upload_preview.png



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

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

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

    整个图可以简单的表示为

    http://www.never-online.net/tutorial/js/upload/upload_UML.png



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

    一)、正如我们上面预览图所见到的,需要三个或以上的新控件。(添加,删除,还有一个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>

    --------------------华丽的分割线----------------------------
    对比上面的文章,觉得我当初的实现真的很傻*啊。)
  • 相关阅读:
    bzoj 3262: 陌上花开
    hdu 5618 Jam's problem again
    bzoj 1176: [Balkan2007]Mokia
    bzoj 2683: 简单题
    Codevs 1080 线段树练习(CDQ分治)
    bzoj 3223: Tyvj 1729 文艺平衡树
    bzoj 1503: [NOI2004]郁闷的出纳员
    bzoj 1208: [HNOI2004]宠物收养所
    bzoj 1588: [HNOI2002]营业额统计
    bzoj 3224: Tyvj 1728 普通平衡树
  • 原文地址:https://www.cnblogs.com/McJeremy/p/1334825.html
Copyright © 2020-2023  润新知