Javascript & DHTML upload file control_javascript skills-JS Tutorial-php.cn

First, let’s do an example of batch upload UI control. The examples that will be generally done in the future will also be based on UI controls. They are all encapsulated into Object or Function into "Class" classes.

The last chapter basically explained some of the basic knowledge to be explained, and today I finally started writing code :D
First, let’s do an example, a batch upload UI control. The examples that will be generally done in the future will also be based on UI controls. They are all encapsulated into Object or Function into "Class" classes.

Maybe this example is too profound for those who only read the previous chapters, but don’t worry, you should understand it quickly if you explain it step by step. The key is to understand how to do it, not how to write it.
First look at a screenshot preview of the finished product:

1. Next, let’s talk about the idea. First define an upload "class",

1). The public access information of this class should be :
1. Some necessary parameters must be passed in the constructor, for example, in which container the upload information is constructed.
2. There must be an add() method for adding an upload
3. There must be a remove() method for deleting an upload

2). There should be Some necessary information is the information that the generated instance itself has (some information of the upload object).
1. How many upload information are obtained in total?
2. A container object. This object is also passed from the constructor.

The whole picture can be simply expressed as

2. I think we should think about what knowledge should be used, which ones are familiar and which ones are unknown.

1). As we can see in the preview above, three or more new controls are required. (Add, delete, there is a file control, or there may be others...but at least that’s what the eyes can see), since it is new information, document.createElement may be used, and it needs to be added. The object.appendChild(obj) or obj.insertBefore() method may be used in a container. Deletion is obj.parentNode.removeChild(obj). All this has been said in the previous chapter.

2). Since it is a control, it must be encapsulated with a function or an object. This part of the knowledge has been briefly explained in Chapter 1.

3) How What about organizations? There are already text and illustrations in the above ideas

Next, let’s start writing:

1), constructor, and basic code (pseudocode)

Copy code The code is as follows:

2. Write the implementation of the add method

Copy the code

The code is as follows:

3. Write the implementation of the remove method

Copy code The code is as follows:

The above remove method is too repetitive. Can we consider re-simplifying the remove method to make our code shorter and easier to maintain? Here, we put this common function into a function, that is, add one more function:

[Ctrl A to select all Note: If you need to introduce external Js, you need to refresh to execute]

4. Combine the code, it’s basically done :D

Copy the code The code is as follows:

Copy the code
The code is as follows:

7. Add CSS to beautify it. The final code is as follows:

 
<!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.jb51.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.jb51.net">   
    <h1> batch upload control with javascript </h1>   
    <div id="container"></div>   
    <div id="footer">tutorial of DHTML and javascript programming, Power By jb51.net</div>   
</body>   
</html>

Copy after login