Javascript & DHTML File Upload control _ javascript skills

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 functions are encapsulated into the & quot; Class. 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.

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.
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)

The Code is as follows:

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

The Code is as follows:

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

The Code is as follows:

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:

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

4. Combining the code is basically done: D

The Code is as follows:

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. Just add the relevant html code:

The Code is as follows:

Script
// Here is the control code we wrote above. Due to the length, I will not post it again
Script

Script
Var o = new upload ("uploadConainer ");
O. add ();
Script

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 line break

2. Add another container p for each added upload
...

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

The Code is as follows:

Script
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.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:

          Upload control-http://www.jb51.net