Javascript & amp; DHTML instance programming (Tutorial) (iii) Example 1-upload a file control instance

Effect DEMO:
Http://www.never-online.net/tutorial/js/upload/
Javascript & DHTML instance programming (Tutorial) (iii), elementary example-upload a file control instance
In the previous chapter, I basically talked about all the basic knowledge to be explained. Today I finally started to write code: D
First, create an instance to upload the UI controls in batches. In the future, the general examples are based on the UI control. Both are encapsulated into objects or "Class" classes using functions.

This example may be too esoteric for friends who just read the previous chapters, but don't worry. The key to explaining it step by step is to understand how to do it, not how to write it.

If you have any friends you don't know, you can leave a message to me.
First, let's take a look at the finished product preview:


1. Let's talk about the idea first. First, define an upload "class ",

1) The public access information of this class should include:
1. the constructor must pass some necessary parameters, such as the container in which the upload information is constructed.
2. There must be an add () method to add an upload
3. You must have a remove () method to delete an upload.

(2) This class should have some necessary information, which is the information of the Instance itself (some information of the upload object ).
1. How many upload information are obtained,
2. A container object, which is also passed from the constructor.

The entire graph can be simply represented



2. I think we should think about what knowledge should be used, what is familiar and what is unknown.

1) as we can see in the previous preview, three or more new controls are required. (Add, delete, there is a file control, or there are other... but at least the eyes see so much), since it is a new information, it may be used in document. createElement. objects may be used to add objects to a container. appendChild (obj) or obj. insertBefore () method. Delete obj. parentNode. removeChild (obj ). These have been mentioned in the previous chapter.

2) since it is a control, it must be encapsulated using a function or an object. For this part of knowledge, the first chapter has briefly explained

3) how to organize it? The above ideas also contain text and diagrams.

Next, let's start writing:
1) constructor and basic code (pseudo code)


<Script>
Function upload (target/* container */
)
{
This. _ cnt = 0;/* counter */
This.tar get = 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 an add
* Delete A deleted object
*/
};
</Script>

2. Write the implementation of the add Method

<Script>
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.tar get. appendChild (cFile );
This.tar get. appendChild (cAdd );
This.tar get. appendChild (cRemove );

/* Counter + 1 */
This. _ cnt ++;

Return this; // return
};
</Script>

3. Write the implementation of the remove Method

<Script>
Upload. prototype. remove = function (n ){
/*
* Delete a file
*/
Var a = document. getElementById ("upload_file _" + n );
A. parentNode. removeChild ();
/*
* Delete an add
*/
Var a = document. getElementById ("upload_add _" + n );
A. parentNode. removeChild ();
/*
* Delete A deleted object
*/
Var a = document. getElementById ("upload_remove _" + n );
A. parentNode. removeChild ();

Return this;
}
</Script>

The above remove method is too repetitive. You can consider re-simplifying remove to make our code shorter and easier to maintain? Here, we put this general function into a function, that is, adding a function:

<Script>
Upload. prototype. _ removeNode = function (id ){
Var a = document. getElementById (id );
A. parentNode. removeChild ();
};

Upload. prototype. remove = function (n ){
/*
* Delete a file
*/
This. _ removeNode ("upload_file _" + n );
/*
* Delete an add
*/
This. _ removeNode ("upload_add _" + n );
/*
* Delete A deleted object
*/
This. _ removeNode ("upload_remove _" + n );

Return this;
}
</Script>

4. Combining the code is basically done: D

<Script>
Function upload (target/* container */
)
{
This. _ cnt = 0;/* counter */
This.tar get = document. getElementById (target );
};

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.tar get. appendChild (cFile );
This.tar get. appendChild (cAdd );
This.tar get. appendChild (cRemove );

/* Counter + 1 */
This. _ cnt ++;

Return this; // return
};

Upload. prototype. _ removeNode = function (id ){
Var a = document. getElementById (id );
A. parentNode. removeChild ();
};

Upload. prototype. remove = function (n ){
/*
* Delete a file
*/
This. _ removeNode ("upload_file _" + n );
/*
* Delete an add
*/
This. _ removeNode ("upload_add _" + n );
/*
* Delete A deleted object
*/
This. _ removeNode ("upload_remove _" + n );

Return this;
}
</Script>

5. OK. Let's run this control:


<Html>
<Head>
<Script>
// Here is the control code we wrote above. Due to the length, I will not post it again
</Script>
</Head>
<Body>
<Div id = "uploadContainer"> </div>
<Script>
Var o = new upload ("uploadConainer ");
O. add ();
</Script>
</Body>
</Html>

6. Well, we have already seen the effect, but it seems not ideal. All the added items are stuck together. It is necessary to beautify it. Where to start? There are many options:
1. Add a linefeed. <br>
2. Add a container div every time you add an upload.
...

Add a container here. If you want to add something later, add something better. Modify add:

<Script>
Upload. prototype. add = function (){
/*
* Generate a 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;
/*
* 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.tar get. appendChild (cWrap );

/* Counter + 1 */
This. _ cnt ++;

Return this; // return
};
</Script>

7. Add CSS to beautify the code. 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.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.tar get = 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 = "add ";
CAdd. onclick = function (){
Self. add ();
};

Var cRemove = document. createElement ("span ");
CRemove. innerHTML = "delete ";
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.tar get. appendChild (cWrap );
This. _ cnt ++;

Return this;
};

Upload. prototype. _ removeNode = function (id ){
Var a = document. getElementById (id );
A. parentNode. removeChild ();
};

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 <Div id = "container"> </div>
<Div id = "footer"> tutorial of DHTML and javascript programming, Power By never-online.net </div>
</Body>
</Html>