Javascript multi-upload control class

I have previously written about how to add an upload box when uploading multiple photos in JS + ASP. NET in my project.
However, now let's look back at it. Although I have fully implemented the Add process in terms of functionalityProgramIt is completely procedural, and it is totally case-based.
If you need to reuse or expand it now, you have to start from scratch.
Address: http://www.cnblogs.com/McJeremy/archive/2008/05/22/1205007.html
So how can we encapsulate the process of adding a class to facilitate reuse or growth?
I was going to implement it myself, but I saw this article on the Internet.Article,
Source Address: http://www.never-online.net/blog/article.asp? Id = 154
I will copy its content here for memo (Note: This article is not my original, and the Forum is owned by the source author
------------------ Gorgeous split line ----------------------------

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 basicCode(Pseudo code)

Copy code-run HTML-save 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

Copy code-run HTML-save Code <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

Copy code-run HTML-save Code <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:

Copy code-run HTML-save Code <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

Copy code-run HTML-save Code <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:

Copy code-run HTML-save Code <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:

Copy code-run HTML-save Code <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:

Copy code-run HTML-save Code <! 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>

------------------ Gorgeous split line ----------------------------
Compared with the above article, I thought it was really silly to implement it .)