Home >Web Front-end >JS Tutorial >Javascript & DHTML upload file control_javascript skills

Javascript & DHTML upload file control_javascript skills

PHP中文网Original: 2016-05-16 19:03:01943browse

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:

3f1c4e4b6b16bbbd69b2ee476dc4f83a
function upload(target/*container*/ > this._cnt = 0; /*Counter*/
this.target = document.getElementById(target);
};

upload.prototype.add = function () {
/*
*Generate a file
*Generate an add
*Generate a delete
*Counter 1
*/
};

upload.prototype.remove = function () {
/*
*Delete a file
*Delete a add
*Delete a delete
*/
};
2cacc6d41bbb37262a98f745aa00fbf0

2. Write the implementation of the add method

Copy the code

The code is as follows:

3f1c4e4b6b16bbbd69b2ee476dc4f83a
upload.prototype.add = function () {
/*
*Generate a file
*/
var self = this; var cnt = this._cnt;
var cFile = document.createElement("input");
cFile.type="file"; cFile.name="upload";
cFile.id = "upload_file_" cnt ;
/*
*Generate an add
*/
var cAdd = document.createElement("span");
cAdd.innerHTML="Add";
cAdd.onclick = function () {
self.add();
};
/*
*Generate a delete
*/
var cRemove = document.createElement("span") ;
cRemove.innerHTML="Delete";
cRemove.onclick = function () {
self.remove(cnt);
};

cAdd.id = "upload_add_ " cnt;
cRemove.id = "upload_remove_" cnt;

/* Add all generated information to the container */
this.target.appendChild(cFile);
this .target.appendChild(cAdd);
this.target.appendChild(cRemove);

/* Counter 1 */
this._cnt;

return this; // Return
};
2cacc6d41bbb37262a98f745aa00fbf0

3. Write the implementation of the remove method

Copy code The code is as follows:

3f1c4e4b6b16bbbd69b2ee476dc4f83a
upload.prototype.remove = function (n) {
/*
*Delete a file
*/
var a = document.getElementById("upload_file_" n);
a.parentNode.removeChild(a);
/*
*Remove one Add
*/
var a = document .getElementById("upload_add_" n);
a.parentNode.removeChild(a);
/*
*Delete one Delete
*/
var a = document.getElementById("upload_remove_ " n);
a.parentNode.removeChild(a);

return this;
}
2cacc6d41bbb37262a98f745aa00fbf0

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:

100db36a723c770d327fc0aef2ce13b1 93f0f5c25f18dab9d176bd4f6de5d30e 3f1c4e4b6b16bbbd69b2ee476dc4f83a

//Here is the control code we wrote above. Due to length, I will not post it here anymore /head>

6c04bd5ca3fcae76e30b72ad730ca86d
85d03c678898be240c84dad8a521192794b3e26ee717c64999d7867364b1b4a3
3f1c4e4b6b16bbbd69b2ee476dc4f83a 🎜>o.add();
2cacc6d41bbb37262a98f745aa00fbf0
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e 6. Well, you have seen the effect, but it seems not ideal. All the added things are stuck together. It is necessary to beautify it. Where to start? There are many options here:
1. Add a newline character0c6dc11e160d3b678d68754cc175188a
2. Add a container p for each upload
...etc.

We add it here A container. If you want to add something in the future, it will be better to add something. Modify add:

Copy the code
The code is as follows:

3f1c4e4b6b16bbbd69b2ee476dc4f83a
upload.prototype.add = function () {
/*
*Generate a file
*/
var self = this; var cnt = this._cnt;
var cWrap = document.createElement("p");
cWrap.id = "upload_wrap_" cnt;
var cFile = document.createElement("input");
cFile.type="file"; cFile.name="upload";
cFile.id = "upload_file_" cnt;
/*
*Generate an add
*/
var cAdd = document.createElement("span");
cAdd.innerHTML="Add";
cAdd.onclick = function () {
self.add();
};
/ *
* Generate a delete
*/
var cRemove = document.createElement("span");
cRemove.innerHTML="delete";
cRemove.onclick = function () {
self.remove(cnt);
};

cAdd.id = "upload_add_" cnt;
cRemove.id = "upload_remove_" cnt;

/* Add all generated information to the container */
cWrap.appendChild(cFile);
cWrap.appendChild(cAdd);
cWrap.appendChild(cRemove);
this.target.appendChild( cWrap);

/* Counter 1 */
this._cnt;

return this; //Return
};
2cacc6d41bbb37262a98f745aa00fbf0

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>

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Instructions for using the javascript indexOf function_Basic knowledgeNext article：Instructions for using the javascript indexOf function_Basic knowledge

See more

Javascript & DHTML upload file control_javascript skills

Related articles