Javascript & DHTML Upload file control 1th/4 page _javascript Tips

The previous chapter basically to explain the basic knowledge to say some, today finally began to write code: D
First to do an example, bulk upload UI controls. Examples that are typically done in the future are also dominated by UI controls. are encapsulated as object or encapsulated as "class" by function.

Maybe This example is too esoteric for a friend who looks at the first few chapters, but don't worry, one step at a time to explain what should be quickly understood is to understand how to do it, not how to write it.
First look at a finished product screenshot preview:

One, next we first say the idea, first define a upload "class",

One), this class of public access information should have:
1, the constructor to pass some necessary parameters, such as, In which container constructs the upload information.
2, must have an add () method to add a upload
3, must have a remove () method to delete a upload

two), this class should have some necessary information, is the generation of the instance itself have information, ( Some information about the upload object).
1, get the total number of upload information,
2, a container object, which is also passed from the constructor.

The entire diagram can be simply represented as


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

One), as we have seen in the preview above, requires three or more new controls. (Add, delete, and a file control, or else ...) But at least that's what the eye sees, and since it's the new information, it's possible to use document.createelement, and to add it to a container you might use Object.appendchild (obj) or Obj.insertbefore () Method. Delete is Obj.parentNode.removeChild (obj). These last chapters have been said.

II, since it is a control, must be encapsulated with a function or an object (object), the first chapter of this part of the knowledge is simply described in

III, how to organize? There are also text and illustrations in the above ideas

and then start writing:

I, constructors, and Basic code (PSEUDOCODE)

Copy Code code as follows:

<script>
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 an added
* Delete a Delete
*/
};
</script>

Current 1/4 page 1234 Next read the full text